/* ============================================================= Tapping Frog — Consultancy Subdomain consultancy.tappingfrog.com Tagline: Resilience as Life as Usual ============================================================= */ /* --- CSS Variables: edit here to retheme the entire site --- */ :root { --brand-primary: #1a2e44; /* deep navy — authority, trust */ --brand-accent: #c8963e; /* warm gold — confidence, craft */ --brand-light: #f4f1ec; /* off-white — warmth, not clinical */ --brand-mid: #e8e2d9; /* light warm grey — dividers */ --text-primary: #1a2e44; --text-body: #3a3a3a; --text-muted: #6b6b6b; --text-inverse: #f4f1ec; --font-heading: 'Playfair Display', Georgia, serif; --font-body: 'Source Serif 4', Georgia, serif; --font-ui: 'DM Sans', system-ui, sans-serif; --nav-height: 64px; --max-width: 1100px; --section-pad: 4rem; --radius: 4px; } /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--text-body); background: #ffffff; line-height: 1.7; -webkit-font-smoothing: antialiased; } /* Google Fonts import — place in each page or add here */ /* @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,400&family=DM+Sans:wght@400;500;600&display=swap'); */ /* --- Typography --- */ h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--brand-primary); line-height: 1.25; font-weight: 700; } h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; } h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 0.75rem; } h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin-bottom: 0.5rem; } p { margin-bottom: 1.1rem; max-width: 68ch; } p:last-child { margin-bottom: 0; } a { color: var(--brand-accent); text-decoration: none; } a:hover { text-decoration: underline; } strong { font-weight: 600; color: var(--brand-primary); } ul, ol { padding-left: 1.4rem; margin-bottom: 1.1rem; } li { margin-bottom: 0.4rem; } /* --- Layout Helpers --- */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; } .section { padding: var(--section-pad) 0; } .section--shaded { background: var(--brand-light); } .section--dark { background: var(--brand-primary); color: var(--text-inverse); } .section--dark h1, .section--dark h2, .section--dark h3 { color: var(--text-inverse); } .section--dark p { color: var(--brand-light); } /* --- Header / Nav (loaded via component) --- */ #site-header { position: sticky; top: 0; z-index: 100; } .site-nav { background: var(--brand-primary); height: var(--nav-height); display: flex; align-items: center; } .site-nav .container { display: flex; align-items: center; justify-content: space-between; width: 100%; } .site-nav__logo img { height: 40px; width: auto; display: block; } .site-nav__links { display: flex; list-style: none; gap: 2rem; padding: 0; margin: 0; } .site-nav__links a { font-family: var(--font-ui); font-size: 0.9rem; font-weight: 500; color: var(--brand-light); letter-spacing: 0.03em; text-transform: uppercase; transition: color 0.2s; } .site-nav__links a:hover, .site-nav__links a.active { color: var(--brand-accent); text-decoration: none; } .site-nav__links a.active { border-bottom: 2px solid var(--brand-accent); padding-bottom: 2px; } /* Mobile hamburger */ .site-nav__toggle { display: none; background: none; border: none; color: var(--brand-light); font-size: 1.5rem; cursor: pointer; font-family: var(--font-ui); } /* --- Hero --- */ .hero { background: var(--brand-primary); padding: 5rem 0 4rem; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; right: 0; width: 40%; height: 100%; background: linear-gradient(135deg, transparent 60%, rgba(200, 150, 62, 0.08) 100%); pointer-events: none; } .hero .tagline { font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--brand-accent); margin-bottom: 1rem; display: block; } .hero h1 { color: #ffffff; max-width: 18ch; } .hero .hero__sub { color: rgba(244, 241, 236, 0.8); font-size: 1.1rem; max-width: 55ch; margin-top: 1rem; margin-bottom: 2rem; } /* --- Credential Bar --- */ .credential-bar { background: var(--brand-accent); padding: 0.75rem 0; } .credential-bar .container { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; } .credential-bar__item { font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600; color: var(--brand-primary); letter-spacing: 0.04em; text-transform: uppercase; } .credential-bar__item::before { content: '◆ '; opacity: 0.6; } /* --- Cards --- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .card { background: #ffffff; border: 1px solid var(--brand-mid); border-top: 3px solid var(--brand-accent); padding: 1.75rem; border-radius: var(--radius); } .card h3 { margin-bottom: 0.5rem; } /* --- Pricing Tiers --- */ .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .pricing-tier { border: 1px solid var(--brand-mid); padding: 2rem 1.75rem; border-radius: var(--radius); position: relative; } .pricing-tier--featured { border-color: var(--brand-accent); border-width: 2px; } .pricing-tier__label { font-family: var(--font-ui); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-accent); margin-bottom: 0.4rem; } .pricing-tier__price { font-family: var(--font-heading); font-size: 1.6rem; color: var(--brand-primary); font-weight: 700; margin-bottom: 1rem; } /* --- Buttons --- */ .btn { display: inline-block; font-family: var(--font-ui); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.75rem 1.75rem; border-radius: var(--radius); cursor: pointer; transition: all 0.2s; text-decoration: none; } .btn--primary { background: var(--brand-accent); color: var(--brand-primary); } .btn--primary:hover { background: #b5852e; text-decoration: none; } .btn--outline { background: transparent; color: var(--brand-light); border: 2px solid var(--brand-light); } .btn--outline:hover { background: var(--brand-light); color: var(--brand-primary); text-decoration: none; } /* --- Pull Quote --- */ .pull-quote { border-left: 4px solid var(--brand-accent); padding: 1rem 0 1rem 1.75rem; margin: 2rem 0; } .pull-quote p { font-family: var(--font-heading); font-size: 1.25rem; font-style: italic; color: var(--brand-primary); max-width: 55ch; } /* --- Footer (loaded via component) --- */ #site-footer { margin-top: 0; } .site-footer { background: var(--brand-primary); color: var(--brand-light); padding: 3rem 0 2rem; } .site-footer .container { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: start; } .site-footer__copy { font-family: var(--font-ui); font-size: 0.8rem; opacity: 0.7; margin-top: 1.5rem; max-width: none; } .site-footer__links { list-style: none; padding: 0; margin: 0; } .site-footer__links li { margin-bottom: 0.4rem; } .site-footer__links a { font-family: var(--font-ui); font-size: 0.8rem; color: rgba(244, 241, 236, 0.6); letter-spacing: 0.04em; } .site-footer__links a:hover { color: var(--brand-accent); text-decoration: none; } .site-footer__hub-links { font-family: var(--font-ui); font-size: 0.75rem; opacity: 0.5; margin-top: 0.5rem; } .site-footer__hub-links a { color: rgba(244, 241, 236, 0.5); } .site-footer__hub-links a:hover { color: var(--brand-accent); text-decoration: none; } /* --- Responsive --- */ @media (max-width: 768px) { :root { --section-pad: 2.5rem; } .site-nav__links { display: none; position: absolute; top: var(--nav-height); left: 0; right: 0; background: var(--brand-primary); flex-direction: column; padding: 1rem 1.5rem 1.5rem; gap: 1.2rem; border-top: 1px solid rgba(255,255,255,0.1); } .site-nav__links.open { display: flex; } .site-nav__toggle { display: block; } .site-footer .container { grid-template-columns: 1fr; } } @media (max-width: 480px) { .pricing-grid { grid-template-columns: 1fr; } .card-grid { grid-template-columns: 1fr; } }