/* ========================================================================== CAT SCRATCH CONSULTING — style.css ========================================================================== HOW TO RE-THEME THIS SITE: Everything you're most likely to change lives in the :root block below. 1. COLORS — swap any hex code and the whole site updates. 2. FONTS — change the font stacks (also update the Google Fonts in the of each HTML page to load different families). 3. SPACING & SIZING — the --space-* and --radius variables control padding rhythm and corner rounding site-wide. ========================================================================== */ :root { /* ---- BRAND COLORS (from your Canva palette) ---- */ --color-primary: #feb859; /* warm amber — hero, buttons, highlights */ --color-accent: #ec3a53; /* coral red — links, scratch accents, CTAs */ --color-navy: #1a4889; /* deep blue — headings, footer, trust anchor */ --color-sky: #359cf1; /* sky blue — secondary accents, hover states */ --color-magenta: #d03a81; /* magenta — sparing use (badges, small details) */ --color-white: #ffffff; --color-black: #000000; /* ---- DERIVED COLORS (tints for backgrounds; tweak freely) ---- */ --color-cream: #fff8ee; /* soft warm page background */ --color-amber-soft: #ffeacb; /* light amber panel background */ --color-navy-soft: #eaf1fb; /* light blue panel background */ --color-text: #22293a; /* near-black body text (softer than pure #000) */ --color-text-muted: #5a6273; /* ---- TYPOGRAPHY ---- Fraunces = display serif (closely matches your Canva logo lettering) Karla = friendly, professional sans for body text */ --font-display: "Fraunces", Georgia, serif; --font-body: "Karla", "Segoe UI", Arial, sans-serif; --text-base: 1.0625rem; /* 17px body size */ --leading: 1.65; /* ---- SPACING SCALE ---- */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 6rem; /* ---- SHAPE & EFFECTS ---- */ --radius: 14px; --radius-lg: 24px; --shadow: 0 8px 30px rgba(26, 72, 137, 0.10); --container: 1120px; /* max content width */ } /* ========================================================================== RESET & BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading); color: var(--color-text); background: var(--color-cream); } img { max-width: 100%; height: auto; display: block; } h1, h2, h3 { font-family: var(--font-display); color: var(--color-navy); line-height: 1.15; margin: 0 0 var(--space-sm); font-weight: 600; } h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); } h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); } h3 { font-size: 1.35rem; } p { margin: 0 0 var(--space-sm); } a { color: var(--color-accent); } a:hover { color: var(--color-sky); } /* Visible keyboard focus everywhere */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--color-sky); outline-offset: 2px; } /* Centered content wrapper — used inside every section */ .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-md); } /* Skip link for screen reader / keyboard users */ .skip-link { position: absolute; left: -999px; top: 0; background: var(--color-navy); color: var(--color-white); padding: var(--space-xs) var(--space-sm); z-index: 100; } .skip-link:focus { left: var(--space-sm); } /* ========================================================================== SIGNATURE ACCENT — the "scratch" mark Three short angled strokes: a quiet nod to the name. Used under section headings via the .scratch class. ========================================================================== */ .scratch { display: inline-block; width: 46px; height: 14px; margin-bottom: var(--space-sm); background: linear-gradient(var(--color-accent), var(--color-accent)) no-repeat 0 0 / 4px 100%, linear-gradient(var(--color-accent), var(--color-accent)) no-repeat 16px 0 / 4px 100%, linear-gradient(var(--color-accent), var(--color-accent)) no-repeat 32px 0 / 4px 100%; transform: skewX(-24deg); } .scratch--light { background: linear-gradient(var(--color-white), var(--color-white)) no-repeat 0 0 / 4px 100%, linear-gradient(var(--color-white), var(--color-white)) no-repeat 16px 0 / 4px 100%, linear-gradient(var(--color-white), var(--color-white)) no-repeat 32px 0 / 4px 100%; } /* ========================================================================== BUTTONS ========================================================================== */ .btn { display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: 1rem; text-decoration: none; padding: 0.85rem 1.7rem; border-radius: 999px; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .btn:hover { transform: translateY(-2px); } .btn--primary { background: var(--color-accent); color: var(--color-white); } .btn--primary:hover { background: var(--color-navy); color: var(--color-white); } .btn--outline { background: transparent; color: var(--color-navy); border-color: var(--color-navy); } .btn--outline:hover { background: var(--color-navy); color: var(--color-white); } /* Light variant for use on dark/amber backgrounds */ .btn--light { background: var(--color-white); color: var(--color-navy); } .btn--light:hover { background: var(--color-navy); color: var(--color-white); } /* ========================================================================== HEADER & NAVIGATION ========================================================================== */ .site-header { background: var(--color-white); border-bottom: 3px solid var(--color-primary); position: sticky; top: 0; z-index: 50; } .site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 0.9rem; padding-bottom: 0.9rem; } /* Wordmark — matches the Canva logo: lowercase display serif + red "#" */ .logo { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--color-navy); text-decoration: none; line-height: 1.1; } .logo .logo-mark { color: var(--color-accent); } .logo:hover { color: var(--color-navy); } /* Primary nav */ .nav-list { display: flex; align-items: center; gap: var(--space-md); list-style: none; margin: 0; padding: 0; } .nav-list a { text-decoration: none; color: var(--color-text); font-weight: 700; font-size: 0.98rem; } .nav-list a:hover { color: var(--color-accent); } .nav-list a[aria-current="page"] { color: var(--color-accent); border-bottom: 3px solid var(--color-primary); padding-bottom: 2px; } /* The nav's CTA button shouldn't get the underline treatment */ .nav-list a.btn { border-bottom: none; padding-bottom: 0.85rem; } /* Hamburger button — hidden on desktop, shown on mobile */ .nav-toggle { display: none; background: none; border: none; padding: var(--space-xs); cursor: pointer; } .nav-toggle span { display: block; width: 26px; height: 3px; margin: 5px 0; background: var(--color-navy); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } /* Animated "X" when the menu is open */ .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ========================================================================== HERO (home page) — amber field, navy display type, echoes the brand card ========================================================================== */ .hero { background: var(--color-primary); padding: var(--space-xl) 0; } .hero .container { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-lg); align-items: center; } .hero h1 { color: var(--color-navy); } .hero p.lede { font-size: 1.2rem; max-width: 34rem; color: var(--color-text); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); } /* Smaller hero variant for interior pages (About / Services / Contact) */ .page-hero { background: var(--color-primary); padding: var(--space-lg) 0; } .page-hero h1 { margin-bottom: var(--space-xs); } .page-hero p { max-width: 42rem; font-size: 1.15rem; margin-bottom: 0; } /* ========================================================================== IMAGE PLACEHOLDERS Swap these
s for real tags. The label tells you what goes where. ========================================================================== */ .img-placeholder { background: var(--color-white); border: 3px dashed var(--color-navy); border-radius: var(--radius-lg); min-height: 300px; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-md); color: var(--color-navy); font-weight: 700; } /* ========================================================================== GENERIC SECTIONS ========================================================================== */ .section { padding: var(--space-xl) 0; } .section--soft { background: var(--color-white); } .section--navy { background: var(--color-navy); color: var(--color-white); } .section--navy h2, .section--navy h3 { color: var(--color-white); } .section-intro { max-width: 44rem; margin-bottom: var(--space-lg); } /* ========================================================================== CARDS (services overview, pillars, etc.) ========================================================================== */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-md); } .card { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: var(--shadow); border-top: 6px solid var(--color-primary); } .card--sky { border-top-color: var(--color-sky); } .card--accent { border-top-color: var(--color-accent); } .card--magenta { border-top-color: var(--color-magenta); } .card h3 { margin-bottom: var(--space-xs); } .card .card-link { font-weight: 700; text-decoration: none; } /* ========================================================================== SERVICE DETAIL BLOCKS (services.html) ========================================================================== */ .service { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: start; padding: var(--space-lg) 0; } .service + .service { border-top: 2px solid var(--color-amber-soft); } /* "Best for" callout box */ .callout { background: var(--color-navy-soft); border-left: 6px solid var(--color-sky); border-radius: var(--radius); padding: var(--space-sm) var(--space-md); margin-top: var(--space-sm); } .callout strong { color: var(--color-navy); } /* Pricing note band */ .pricing-note { background: var(--color-amber-soft); border-radius: var(--radius-lg); padding: var(--space-md); text-align: center; } .pricing-note p { max-width: 46rem; margin: 0 auto var(--space-sm); } /* ========================================================================== ABOUT PAGE ========================================================================== */ .about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-lg); align-items: start; } /* Three-pillar list (I/O psych, law, project management) */ .pillars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); } .pillars li { background: var(--color-white); border-radius: var(--radius); padding: var(--space-sm) var(--space-md); box-shadow: var(--shadow); border-left: 6px solid var(--color-primary); } .pillars li:nth-child(2) { border-left-color: var(--color-sky); } .pillars li:nth-child(3) { border-left-color: var(--color-magenta); } .pillars strong { color: var(--color-navy); display: block; margin-bottom: 2px; } /* ========================================================================== CONTACT PAGE ========================================================================== */ .contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-lg); align-items: start; } .contact-form { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: var(--shadow); } .form-field { margin-bottom: var(--space-sm); } .form-field label { display: block; font-weight: 700; color: var(--color-navy); margin-bottom: 0.3rem; } .form-field input, .form-field select, .form-field textarea { width: 100%; font: inherit; padding: 0.7rem 0.9rem; border: 2px solid var(--color-navy-soft); border-radius: var(--radius); background: var(--color-cream); } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--color-sky); } /* Business info panel */ .info-panel { background: var(--color-navy); color: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-md); } .info-panel h2, .info-panel h3 { color: var(--color-white); } .info-panel a { color: var(--color-primary); } .info-panel ul { list-style: none; margin: 0 0 var(--space-md); padding: 0; } .info-panel li { margin-bottom: var(--space-xs); } /* ========================================================================== CTA BAND (used at the bottom of most pages) ========================================================================== */ .cta-band { background: var(--color-navy); color: var(--color-white); text-align: center; padding: var(--space-xl) 0; } .cta-band h2 { color: var(--color-white); } .cta-band p { max-width: 40rem; margin: 0 auto var(--space-md); } /* ========================================================================== FOOTER ========================================================================== */ .site-footer { background: var(--color-black); color: var(--color-white); padding: var(--space-lg) 0 var(--space-md); font-size: 0.95rem; } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-md); } .site-footer a { color: var(--color-primary); text-decoration: none; } .site-footer a:hover { color: var(--color-sky); } .site-footer .logo { color: var(--color-white); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: var(--space-sm); text-align: center; color: rgba(255, 255, 255, 0.7); } /* ========================================================================== RESPONSIVE BREAKPOINTS ========================================================================== */ /* Tablet and down: collapse two-column layouts */ @media (max-width: 900px) { .hero .container, .about-grid, .contact-grid, .service { grid-template-columns: 1fr; } .hero { padding: var(--space-lg) 0; } } /* Mobile: hamburger nav */ @media (max-width: 720px) { .nav-toggle { display: block; } .nav-list { display: none; /* hidden until toggled */ position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--color-white); border-bottom: 3px solid var(--color-primary); padding: var(--space-sm) var(--space-md) var(--space-md); box-shadow: var(--shadow); } .nav-list.is-open { display: flex; } .nav-list li { padding: var(--space-xs) 0; } .nav-list a.btn { text-align: center; margin-top: var(--space-xs); } } /* Respect users who prefer less motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }