/* ============================================ MIKE KENT COMMUNICATIONS Global Stylesheet — Design Tokens + Styles ============================================ */ /* --- Design Tokens --- */ :root { /* Colors */ --color-bg: #FAF7F2; --color-bg-alt: #F0EBE3; --color-bg-dark: #1A1A1A; --color-text: #1A1A1A; --color-text-secondary: #4A4A4A; --color-text-light: #FAF7F2; --color-accent: #2D5A3D; --color-accent-hover: #1E3F2B; --color-rule: #D4CFC7; --color-rule-dark: #333333; /* Typography */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Source Serif 4', Georgia, serif; --font-ui: 'DM Sans', 'Helvetica Neue', sans-serif; /* Type Scale (mobile-first) */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.5rem; --text-4xl: 3.25rem; /* Spacing */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 8rem; /* Layout */ --max-width: 1140px; --max-width-text: 720px; --gutter: 1.25rem; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration: 0.6s; } /* Scale up type on larger screens */ @media (min-width: 768px) { :root { --text-base: 1.125rem; --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: 2.5rem; --text-3xl: 3.25rem; --text-4xl: 4.25rem; --gutter: 2rem; } } /* --- Reset & Base --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.7; color: var(--color-text); background-color: var(--color-bg); } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-accent); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--color-accent-hover); } /* --- Utility --- */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .container--narrow { max-width: var(--max-width-text); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- Scroll Reveal (JS-dependent) --- Content is visible by default. JS adds .reveal-ready to , which hides .reveal elements. Observer then adds .is-visible to show them with animation. If JS fails, everything stays visible. */ html.reveal-ready .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out); } html.reveal-ready .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Hero overlay text: fade only, no vertical shift */ html.reveal-ready .hero-image__text .reveal { transform: none; } /* ============================================ NAVIGATION ============================================ */ #nav-slot { position: sticky; top: 0; z-index: 100; } .site-nav { background-color: var(--color-bg); border-bottom: 1px solid var(--color-rule); } .site-nav__inner { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) 0; } .site-nav__brand { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text); text-decoration: none; } .site-nav__brand:hover { color: var(--color-accent); } .site-nav__logo { height: 36px; width: auto; display: block; } @media (min-width: 768px) { .site-nav__logo { height: 40px; } } .site-nav__links { display: none; list-style: none; gap: var(--space-md); align-items: center; } .site-nav__links a { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-secondary); text-decoration: none; padding: var(--space-xs) 0; position: relative; } .site-nav__links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: var(--color-accent); transition: width 0.3s var(--ease-out); } .site-nav__links a:hover { color: var(--color-text); } .site-nav__links a:hover::after { width: 100%; } /* Hamburger */ .site-nav__toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 28px; height: 28px; background: none; border: none; cursor: pointer; padding: 0; } .site-nav__toggle span { display: block; width: 100%; height: 1.5px; background-color: var(--color-text); transition: transform 0.3s ease, opacity 0.3s ease; } .site-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .site-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .site-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile menu */ .site-nav__mobile { display: none; padding: var(--space-md) 0 var(--space-lg); border-top: 1px solid var(--color-rule); } .site-nav__mobile.is-open { display: block; } .site-nav__mobile ul { list-style: none; } .site-nav__mobile li + li { margin-top: var(--space-sm); } .site-nav__mobile a { font-family: var(--font-ui); font-size: var(--text-sm); letter-spacing: 0.04em; color: var(--color-text-secondary); text-decoration: none; } .site-nav__mobile a:hover { color: var(--color-accent); } @media (min-width: 900px) { .site-nav__links { display: flex; } .site-nav__toggle { display: none; } } /* ============================================ HERO IMAGE ============================================ */ .hero-image { width: 100%; height: 50vh; min-height: 320px; max-height: 600px; overflow: hidden; position: relative; display: flex; align-items: flex-end; justify-content: center; } @media (min-width: 768px) { .hero-image { height: 60vh; max-height: 720px; } } .hero-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; } .hero-image::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50%; background: linear-gradient(to top, var(--color-bg), transparent); pointer-events: none; } .hero-image__text { position: relative; z-index: 2; text-align: center; padding: 0 var(--gutter) 240px; } @media (min-width: 768px) { .hero-image__text { padding-bottom: 300px; } } .hero-image__lead { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; line-height: 1.15; color: var(--color-text-light); margin-bottom: var(--space-xs); text-shadow: 0 1px 6px rgba(0,0,0,0.4); } @media (min-width: 768px) { .hero-image__lead { font-size: var(--text-4xl); } } .hero-image__sublead { font-family: var(--font-body); font-size: var(--text-xl); font-weight: 400; font-style: italic; color: var(--color-text-light); opacity: 0.9; text-shadow: 0 1px 6px rgba(0,0,0,0.4); } /* ============================================ HERO TEXT — body copy below image ============================================ */ .hero { padding: var(--space-lg) 0 var(--space-xl); text-align: center; } @media (min-width: 768px) { .hero { padding: var(--space-xl) 0 var(--space-2xl); } } .hero__rule { width: 48px; height: 2px; background-color: var(--color-accent); border: none; margin: 0 auto var(--space-lg); } .hero__body { max-width: var(--max-width-text); margin: 0 auto; } .hero__body p { font-family: var(--font-body); font-size: var(--text-lg); line-height: 1.8; color: var(--color-text-secondary); margin-bottom: var(--space-md); } .hero__body p:last-child { margin-bottom: 0; } .hero__body p strong { color: var(--color-text); font-weight: 600; } /* ============================================ FEATURED WORK ============================================ */ .featured { padding: var(--space-xl) 0 var(--space-2xl); } .section-header { text-align: center; margin-bottom: var(--space-xl); } .section-header__label { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); display: block; margin-bottom: var(--space-xs); } .section-header__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--color-text); } .featured__grid { display: grid; gap: var(--space-lg); } @media (min-width: 768px) { .featured__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } } /* Story Card */ .story-card { border-top: 2px solid var(--color-accent); padding-top: var(--space-md); position: relative; } .story-card__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: var(--space-md); } .story-card__category { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: var(--space-xs); } .story-card__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: 1.25; color: var(--color-text); margin-bottom: var(--space-sm); } .story-card__pull { font-family: var(--font-body); font-size: var(--text-base); font-style: italic; line-height: 1.65; color: var(--color-text-secondary); margin-bottom: var(--space-md); } .story-card__link { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.04em; color: var(--color-accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .story-card__link::after { content: ''; position: absolute; inset: 0; } .story-card__link:hover { color: var(--color-accent-hover); } .story-card__link svg { width: 14px; height: 14px; transition: transform 0.2s ease; } .story-card__link:hover svg { transform: translateX(3px); } /* ============================================ CREDENTIALS STRIP ============================================ */ .credentials { background-color: var(--color-bg-dark); padding: var(--space-lg) 0; } .credentials__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); text-align: center; } @media (min-width: 768px) { .credentials__inner { flex-direction: row; justify-content: center; gap: var(--space-lg); } } .credentials__item { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 400; letter-spacing: 0.04em; color: var(--color-text-light); opacity: 0.8; } .credentials__divider { display: none; } @media (min-width: 768px) { .credentials__divider { display: block; width: 1px; height: 16px; background-color: var(--color-rule-dark); } } /* ============================================ CTA SECTION ============================================ */ .cta-section { padding: var(--space-2xl) 0; text-align: center; } .cta-section__heading { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-md); } .cta-section__actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); } @media (min-width: 480px) { .cta-section__actions { flex-direction: row; justify-content: center; gap: var(--space-md); } } .btn { display: inline-block; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.9em 2.2em; border: none; cursor: pointer; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; } .btn--primary { background-color: var(--color-accent); color: var(--color-text-light); } .btn--primary:hover { background-color: var(--color-accent-hover); color: var(--color-text-light); } .btn--outline { background-color: transparent; color: var(--color-accent); border: 1.5px solid var(--color-accent); } .btn--outline:hover { background-color: var(--color-accent); color: var(--color-text-light); } /* ============================================ FOOTER ============================================ */ .site-footer { background-color: var(--color-bg-dark); color: var(--color-text-light); padding: var(--space-xl) 0 var(--space-lg); } .site-footer__inner { display: grid; gap: var(--space-lg); } @media (min-width: 768px) { .site-footer__inner { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-xl); } } .site-footer__brand { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-light); margin-bottom: var(--space-sm); } .site-footer__tagline { font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-light); opacity: 0.6; } .site-footer__nav-heading { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-light); opacity: 0.5; margin-bottom: var(--space-sm); } .site-footer__nav { list-style: none; } .site-footer__nav li + li { margin-top: var(--space-xs); } .site-footer__nav a { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-light); opacity: 0.7; text-decoration: none; } .site-footer__nav a:hover { opacity: 1; color: var(--color-text-light); } .site-footer__contact p { font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.8; color: var(--color-text-light); opacity: 0.7; } .site-footer__contact a { color: var(--color-text-light); opacity: 0.7; } .site-footer__contact a:hover { opacity: 1; } .site-footer__bottom { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--color-rule-dark); text-align: center; } .site-footer__copyright { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-light); opacity: 0.4; } /* ============================================ PAGE HEADER — shared across interior pages ============================================ */ .page-header { background-color: var(--color-bg-dark); padding: var(--space-xl) 0 var(--space-lg); text-align: center; } @media (min-width: 768px) { .page-header { padding: var(--space-2xl) 0 var(--space-xl); } } .page-header__label { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); display: block; margin-bottom: var(--space-sm); } .page-header__title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; line-height: 1.15; color: var(--color-text-light); margin-bottom: var(--space-md); } @media (min-width: 768px) { .page-header__title { font-size: var(--text-4xl); } } .page-header__intro { font-family: var(--font-body); font-size: var(--text-lg); line-height: 1.8; color: var(--color-text-light); opacity: 0.7; max-width: var(--max-width-text); margin: 0 auto; } .page-header__rule { width: 48px; height: 2px; background-color: var(--color-accent); border: none; margin: var(--space-lg) auto 0; } /* ============================================ ABOUT PAGE ============================================ */ .about-layout { display: grid; gap: var(--space-xl); padding: var(--space-xl) 0 var(--space-2xl); } @media (min-width: 900px) { .about-layout { grid-template-columns: 360px 1fr; gap: var(--space-2xl); align-items: start; } } .about-portrait { width: 100%; max-width: 420px; margin: 0 auto; } .about-portrait img { width: 100%; display: block; } .about-portrait__caption { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: var(--space-sm); text-align: center; letter-spacing: 0.04em; } .about-body h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-md); } .about-body p { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.8; color: var(--color-text-secondary); margin-bottom: var(--space-md); } .about-body p:last-child { margin-bottom: 0; } .about-body .pivot { font-family: var(--font-display); font-size: var(--text-xl); font-style: italic; font-weight: 400; color: var(--color-text); line-height: 1.55; border-left: 3px solid var(--color-accent); padding-left: var(--space-md); margin: var(--space-xl) 0; } .about-credentials { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); } .about-credentials__item { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-secondary); padding: 0.4em 1em; border: 1px solid var(--color-rule); } /* ============================================ FEATURE WRITING PAGE ============================================ */ .feature-toc { padding: var(--space-xl) 0; border-bottom: 1px solid var(--color-rule); } .feature-toc__heading { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: var(--space-md); } .feature-toc__list { list-style: none; display: grid; gap: var(--space-xs); } @media (min-width: 768px) { .feature-toc__list { grid-template-columns: repeat(2, 1fr); gap: var(--space-xs) var(--space-xl); } } .feature-toc__list a { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-accent); display: flex; align-items: baseline; gap: var(--space-xs); } .feature-toc__list a::before { content: ''; display: inline-block; width: 20px; height: 1px; background-color: var(--color-accent); flex-shrink: 0; position: relative; top: -3px; } .feature-toc__list a:hover { color: var(--color-accent-hover); } /* Feature article */ .feature-article { padding: var(--space-2xl) 0; border-bottom: 1px solid var(--color-rule); } .feature-article:last-child { border-bottom: none; } .feature-article__meta { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); } .feature-article__category { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); } .feature-article__pub { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-secondary); } .feature-article__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; line-height: 1.2; color: var(--color-text); margin-bottom: var(--space-lg); } @media (min-width: 768px) { .feature-article__title { font-size: var(--text-3xl); } } .feature-article__photo { width: 100%; margin-bottom: var(--space-lg); } .feature-article__photo img { width: 100%; max-height: 520px; object-fit: cover; display: block; } .feature-article__photo figcaption { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: var(--space-xs); padding-left: var(--space-xs); border-left: 2px solid var(--color-rule); } .feature-article__body { max-width: var(--max-width-text); } .feature-article__body p { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.85; color: var(--color-text-secondary); margin-bottom: var(--space-md); } .feature-article__body p:last-child { margin-bottom: 0; } .feature-article__body h2, .feature-article__body h3 { font-family: var(--font-display); color: var(--color-text); margin-top: var(--space-xl); margin-bottom: var(--space-md); } .feature-article__body h2 { font-size: var(--text-xl); } .feature-article__body h3 { font-size: var(--text-lg); } .feature-article__pull { font-family: var(--font-display); font-size: var(--text-xl); font-style: italic; font-weight: 400; color: var(--color-text); line-height: 1.55; border-left: 3px solid var(--color-accent); padding: var(--space-sm) 0 var(--space-sm) var(--space-md); margin: var(--space-xl) 0; } .feature-article__sidebar { margin-top: var(--space-lg); padding: var(--space-md); background-color: var(--color-bg-alt); border-top: 2px solid var(--color-accent); } .feature-article__sidebar p { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-xs); } .feature-article__sidebar p:last-child { margin-bottom: 0; } .feature-article__sidebar strong { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text); display: block; margin-bottom: var(--space-xs); } /* ============================================ SERVICES PAGE ============================================ */ .services-intro { padding: var(--space-xl) 0 var(--space-lg); } .services-intro p { font-family: var(--font-body); font-size: var(--text-lg); line-height: 1.8; color: var(--color-text-secondary); max-width: var(--max-width-text); } .services-section { padding: var(--space-xl) 0; border-top: 1px solid var(--color-rule); } .services-section__heading { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-sm); } .services-section__sub { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text-secondary); max-width: var(--max-width-text); margin-bottom: var(--space-xl); line-height: 1.8; } /* Press Release */ .press-release { padding: var(--space-xl) 0; border-top: 1px solid var(--color-rule); } .press-release + .press-release { border-top: 1px solid var(--color-rule); } .press-release__flag { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-xs); display: block; } .press-release__date { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-secondary); margin-bottom: var(--space-md); } .press-release__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: 1.2; color: var(--color-text); margin-bottom: var(--space-md); } .press-release__contact { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-secondary); margin-bottom: var(--space-lg); line-height: 1.6; } .press-release__body { max-width: var(--max-width-text); } .press-release__body p { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.85; color: var(--color-text-secondary); margin-bottom: var(--space-md); } .press-release__body p:last-child { margin-bottom: 0; } .press-release__more { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-secondary); letter-spacing: 0.06em; margin: var(--space-sm) 0; } .press-release__add-head { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text); margin: var(--space-lg) 0 var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); } .press-release__end { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: 0.12em; color: var(--color-text-secondary); margin-top: var(--space-md); } /* Craft Piece — "Anatomy of a Press Release" */ .craft-piece { padding: var(--space-2xl) 0; border-top: 2px solid var(--color-accent); } .craft-piece__flag { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); display: block; margin-bottom: var(--space-sm); } .craft-piece__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-md); } .craft-piece__body { max-width: var(--max-width-text); } .craft-piece__body p { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.85; color: var(--color-text-secondary); margin-bottom: var(--space-md); } .craft-piece__body p:last-child { margin-bottom: 0; } .craft-piece__body h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--color-text); margin-top: var(--space-xl); margin-bottom: var(--space-sm); } .craft-piece__body ol, .craft-piece__body ul { padding-left: var(--space-md); margin-bottom: var(--space-md); } .craft-piece__body li { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.8; color: var(--color-text-secondary); margin-bottom: var(--space-xs); } /* ============================================ THREE HORSEMEN PAGE ============================================ */ .book-hero { background-color: var(--color-bg-dark); padding: var(--space-2xl) 0; color: var(--color-text-light); } .book-hero__inner { display: grid; gap: var(--space-xl); align-items: center; } @media (min-width: 768px) { .book-hero__inner { grid-template-columns: 280px 1fr; gap: var(--space-2xl); } } .book-hero__cover { max-width: 280px; margin: 0 auto; box-shadow: 0 20px 60px rgba(0,0,0,0.6); } .book-hero__cover img { width: 100%; display: block; } .book-hero__label { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); display: block; margin-bottom: var(--space-sm); } .book-hero__title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; line-height: 1.1; color: var(--color-text-light); margin-bottom: var(--space-sm); } @media (min-width: 768px) { .book-hero__title { font-size: var(--text-4xl); } } .book-hero__byline { font-family: var(--font-display); font-size: var(--text-base); font-style: italic; color: var(--color-text-light); opacity: 0.6; margin-bottom: var(--space-xl); } .book-hero__status { display: inline-block; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-bg-dark); background-color: var(--color-accent); padding: 0.4em 1em; } .book-tease { padding: var(--space-2xl) 0; border-bottom: 1px solid var(--color-rule); } .book-tease__body { max-width: var(--max-width-text); } .book-tease__body p { font-family: var(--font-body); font-size: var(--text-lg); line-height: 1.85; color: var(--color-text-secondary); margin-bottom: var(--space-md); } .book-tease__body p:last-child { margin-bottom: 0; } .book-author { padding: var(--space-2xl) 0; background-color: var(--color-bg-alt); } .book-author__body { max-width: var(--max-width-text); } .book-author__heading { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-md); } .book-author__body p { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.8; color: var(--color-text-secondary); margin-bottom: var(--space-md); } .book-author__body p:last-child { margin-bottom: 0; } /* ============================================ PAST WORK PAGE — Video Grid ============================================ */ .past-work-intro { padding: var(--space-xl) 0 var(--space-lg); border-bottom: 1px solid var(--color-rule); } .past-work-intro p { font-family: var(--font-body); font-size: var(--text-lg); line-height: 1.8; color: var(--color-text-secondary); max-width: var(--max-width-text); } .past-work-grid { display: grid; gap: var(--space-lg); padding: var(--space-xl) 0 var(--space-2xl); } @media (min-width: 640px) { .past-work-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .past-work-grid { grid-template-columns: repeat(3, 1fr); } } .video-card { border-top: 2px solid var(--color-accent); padding-top: var(--space-md); } .video-placeholder { width: 100%; aspect-ratio: 16 / 9; background-color: var(--color-bg-alt); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; margin-bottom: var(--space-md); } .video-embed { width: 100%; aspect-ratio: 16 / 9; background-color: var(--color-bg-alt); overflow: hidden; margin-bottom: var(--space-md); } .video-embed iframe { width: 100%; height: 100%; border: 0; display: block; } .past-work-more { text-align: center; padding: 0 0 var(--space-2xl); } .video-placeholder__icon { width: 48px; height: 48px; background-color: var(--color-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .video-placeholder__icon svg { width: 20px; height: 20px; fill: #fff; margin-left: 3px; } .video-card__category { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: var(--space-xs); } .video-card__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; line-height: 1.25; color: var(--color-text); margin-bottom: var(--space-xs); } .video-card__desc { font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.65; color: var(--color-text-secondary); } /* ============================================ AWARDS PAGE ============================================ */ .awards-section { padding: var(--space-xl) 0 var(--space-2xl); } .awards-group { margin-bottom: var(--space-2xl); } .awards-group:last-child { margin-bottom: 0; } .awards-group__heading { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-sm); padding-bottom: var(--space-sm); border-bottom: 2px solid var(--color-accent); } .award-item { display: grid; gap: var(--space-sm); padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-rule); } @media (min-width: 768px) { .award-item { grid-template-columns: 180px 1fr; gap: var(--space-lg); } } .award-item__year { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.04em; color: var(--color-text-secondary); } .award-item__category { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-xs); } .award-item__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-xs); } .award-item__desc { font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.7; color: var(--color-text-secondary); } /* ============================================ CONTACT PAGE ============================================ */ .contact-layout { display: grid; gap: var(--space-2xl); padding: var(--space-xl) 0 var(--space-2xl); } @media (min-width: 768px) { .contact-layout { grid-template-columns: 1fr 360px; align-items: start; gap: var(--space-3xl); } } /* Form */ .contact-form { display: flex; flex-direction: column; gap: var(--space-md); } .contact-form__group { display: flex; flex-direction: column; gap: var(--space-xs); } /* Honeypot — off-screen, invisible to humans, catches bots. */ .contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Submission result banner (shown after a Post/Redirect/Get round-trip). */ .contact-notice { padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); border-left: 3px solid var(--color-accent); background-color: var(--color-bg-alt); font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.5; } .contact-notice--error { border-left-color: #b23b3b; } .contact-notice a { color: inherit; text-decoration: underline; } .contact-form label { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); } .contact-form input, .contact-form select, .contact-form textarea { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); background-color: var(--color-bg); border: 1px solid var(--color-rule); padding: 0.75em 1em; width: 100%; appearance: none; outline: none; transition: border-color 0.2s ease; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--color-accent); } .contact-form textarea { resize: vertical; min-height: 180px; } .contact-form__note { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: calc(-1 * var(--space-xs)); } /* Contact info sidebar */ .contact-info__heading { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-md); } .contact-info__item { display: flex; flex-direction: column; gap: 2px; padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); } .contact-info__label { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); } .contact-info__value { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); line-height: 1.6; } .contact-info__value a { color: var(--color-accent); } .contact-info__value a:hover { color: var(--color-accent-hover); } /* ============================================ PAGE HEADER — back link (article pages) ============================================ */ .page-header__back { display: inline-block; font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--color-text-light); opacity: 0.5; text-decoration: none; margin-bottom: var(--space-md); transition: opacity 0.2s ease; } .page-header__back:hover { opacity: 1; color: var(--color-text-light); } /* ============================================ ARTICLE SINGLE PAGE ============================================ */ .article-single { padding: var(--space-xl) 0 var(--space-2xl); } .article-single__photo { width: 100%; margin-bottom: var(--space-xl); } .article-single__photo img { width: 100%; max-height: 560px; object-fit: cover; display: block; } .article-single__photo figcaption { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: var(--space-xs); padding-left: var(--space-xs); } .article-single__body { max-width: var(--max-width-text); } .article-single__body p { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.85; color: var(--color-text-secondary); margin-bottom: var(--space-md); } .article-single__body p:last-child { margin-bottom: 0; } .article-single__body ul { padding-left: var(--space-md); margin-bottom: var(--space-md); } .article-single__body li { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.8; color: var(--color-text-secondary); margin-bottom: var(--space-xs); } .article-single__body h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--color-text); margin-top: var(--space-2xl); margin-bottom: var(--space-sm); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); } .article-single__body a { color: var(--color-accent); } .article-single__body a:hover { color: var(--color-accent-hover); } .article-single__footer { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); max-width: var(--max-width-text); } /* ============================================ FEATURE WRITING — Card Grid Index ============================================ */ .writing-grid { padding: var(--space-xl) 0 var(--space-2xl); } .writing-grid .featured__grid { grid-template-columns: 1fr; } @media (min-width: 600px) { .writing-grid .featured__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .writing-grid .featured__grid { grid-template-columns: repeat(3, 1fr); } } /* ============================================ SERVICES PAGE — Capability List ============================================ */ .services-list { list-style: none; margin-bottom: var(--space-xl); } .services-list li { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text-secondary); line-height: 1.7; padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); display: flex; align-items: baseline; gap: var(--space-sm); } .services-list li::before { content: ''; display: inline-block; width: 16px; height: 1px; background-color: var(--color-accent); flex-shrink: 0; position: relative; top: -3px; } /* ============================================ SERVICES PAGE — Work Sample Cards + Modals ============================================ */ .work-samples-grid { display: grid; gap: var(--space-lg); padding: var(--space-xl) 0; } @media (min-width: 640px) { .work-samples-grid { grid-template-columns: repeat(3, 1fr); } } .sample-card { border-top: 2px solid var(--color-accent); padding-top: var(--space-md); } .sample-card__flag { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); display: block; margin-bottom: var(--space-xs); } .sample-card__date { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-secondary); margin-bottom: var(--space-sm); } .sample-card__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; line-height: 1.25; color: var(--color-text); margin-bottom: var(--space-sm); } .sample-card__client { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-secondary); letter-spacing: 0.04em; margin-bottom: var(--space-md); } .sample-card__btn { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.04em; color: var(--color-accent); display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; padding: 0; } .sample-card__btn:hover { color: var(--color-accent-hover); } .sample-card__btn svg { width: 14px; height: 14px; transition: transform 0.2s ease; } .sample-card__btn:hover svg { transform: translateX(3px); } .press-modal { position: fixed; inset: 0; background: rgba(26, 26, 26, 0.75); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: var(--space-lg) var(--gutter); overflow-y: auto; } .press-modal[hidden] { display: none; } .press-modal__inner { background: var(--color-bg); max-width: 720px; width: 100%; padding: var(--space-xl); position: relative; margin: var(--space-xl) auto; } .press-modal__close { position: absolute; top: var(--space-md); right: var(--space-md); background: none; border: none; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-secondary); cursor: pointer; letter-spacing: 0.04em; padding: var(--space-xs); } .press-modal__close:hover { color: var(--color-text); } /* ============================================ SERVICES PAGE — Thought Leadership Essay ============================================ */ .thought-piece-section { background-color: var(--color-bg-alt); padding: var(--space-2xl) 0; margin-top: var(--space-xl); } .thought-piece-section .craft-piece { border-top: none; padding-top: 0; } .craft-piece__cta { margin-top: var(--space-lg); display: inline-block; } /* Awards — inline photo for an individual award item */ .award-item__figure { margin: var(--space-md) 0 0; max-width: 440px; } .award-item__figure img { width: 100%; display: block; border-radius: 2px; } .award-item__figure figcaption { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: var(--space-xs); letter-spacing: 0.02em; } /* Services — "Mike at Work" photo strip */ .media-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-md); } .media-strip figure { margin: 0; } .media-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 2px; } .media-strip figcaption { font-family: var(--font-ui); font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-secondary); margin-top: var(--space-xs); } @media (max-width: 700px) { .media-strip { grid-template-columns: 1fr; max-width: 440px; } }