/* site.css — Meet Mark Houck (opposition / attack archetype) Dark grunge theme. Red #c43232 accent, white text over a distressed bg. */ /* ------------------------------------------------------------------------- FONTS — Typekit-first, Google fallback (see spec §6.1) Typekit embed is in : https://use.typekit.net/mem8bfy.css Display: Cheddar Gothic (rough) — fallback Oswald (condensed impact) Body: Forma DJR Deck — fallback Archivo ------------------------------------------------------------------------- */ :root { --font-display: "cheddar-gothic-rough", "cheddar-gothic-sans", "Oswald", sans-serif; --font-body: "forma-djr-deck", "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Palette */ --primary--color: #c43232; /* red accent */ --primary--color-80: #c43232cc; --utility--white: #ffffff; --bg-dark: #0a0f18; /* dark fallback behind the grunge photo */ --bg-panel: rgba(6, 10, 16, .72); } /* ---- Base ---- */ body { font-family: var(--font-body); color: var(--utility--white); background-color: var(--bg-dark); background-image: url("../images/hero-bg.webp"); background-size: cover; background-position: top center; background-attachment: fixed; line-height: 1.5; font-size: 1.0625rem; margin: 0; } h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; line-height: .95; } p { margin: 0; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } /* Divider (provided rough red line) */ .divider { width: min(420px, 70%); height: auto; margin: 1.5rem auto; image-rendering: auto; } /* ---- Button ---- */ .button { display: inline-block; background: var(--primary--color); color: var(--utility--white); font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .12em; font-size: 1.5rem; line-height: 1; padding: 1rem 2.75rem; transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease; box-shadow: 0 8px 22px rgba(196,50,50,.35); } .button:hover { transform: translateY(-2px); background: #d63b3b; box-shadow: 0 12px 28px rgba(196,50,50,.45); } .button:focus-visible { outline: 3px solid var(--utility--white); outline-offset: 3px; } /* ========================================================================= HERO — torn-top grunge headline + tagline + Learn More ========================================================================= */ .hero { text-align: center; } .hero__inner { min-height: 36vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 4vh; padding-bottom: 6rem; } .hero__name { text-transform: uppercase; color: var(--utility--white); font-size: clamp(3.25rem, 10vw, 8rem); letter-spacing: .02em; text-shadow: 0 4px 30px rgba(0,0,0,.6); } .hero__tagline { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(1.1rem, 3.2vw, 2rem); color: var(--utility--white); } .hero__cta { margin-top: 2rem; } /* ========================================================================= VIDEO — featured element, overlaps the hero (above) and the case (below) ========================================================================= */ .section-video { position: relative; z-index: 3; margin-top: -5rem; } .video-wrap { position: relative; width: 100%; max-width: 620px; margin: 0 auto; aspect-ratio: 16 / 9; /* height tracks the capped width, not the parent */ border: 3px solid var(--primary--color); box-shadow: 0 22px 60px rgba(0,0,0,.65); background: #000; } .video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ========================================================================= CASE — solid panel tucked under the video's lower half ========================================================================= */ .section-case { position: relative; z-index: 1; background: var(--bg-dark); margin-top: -4.5rem; /* slide panel up behind the video */ padding-top: 6.5rem; /* push the lede clear of the video */ padding-bottom: 4rem; } .case-lede { text-align: center; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.6rem, 4vw, 2.75rem); color: var(--utility--white); margin-bottom: 2.5rem; } .charges { display: grid; gap: 0; max-width: 54rem; margin: 0 auto; } .charge { padding: 2rem 0; } .charge + .charge { border-top: 0; } .charge__head { display: flex; align-items: baseline; gap: .75rem; justify-content: center; margin-bottom: .6rem; text-align: center; } .charge__num { font-family: var(--font-display); color: var(--primary--color); font-size: clamp(2.5rem, 6vw, 4rem); line-height: .8; } .charge__label { font-family: var(--font-display); text-transform: uppercase; color: var(--utility--white); letter-spacing: .02em; font-size: clamp(1.75rem, 4.5vw, 3rem); } .charge__body { text-align: center; font-size: 1.2rem; max-width: 42rem; margin: 0 auto; color: rgba(255,255,255,.92); } .charge__divider { width: min(360px, 60%); margin: 0 auto; } /* ========================================================================= FOOTER — boxed disclaimer (required, see spec §7.7) ========================================================================= */ .footer { background: rgba(4, 7, 11, .9); } .footer__inner { text-align: center; } .paid-for { display: inline-block; border: 1px solid rgba(255,255,255,.55); /* required visible border */ padding: 10px 30px; margin: 0 auto 1rem; max-width: 46rem; font-size: .95rem; color: rgba(255,255,255,.88); } .footer__link { display: block; margin-top: .5rem; color: var(--utility--white); text-decoration: underline; opacity: .85; } .footer__link:hover { opacity: 1; } /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width: 767px) { body { background-attachment: scroll; } .hero__inner { min-height: 34vh; padding-bottom: 4.5rem; } .section-video { margin-top: -2.25rem; } .section-case { margin-top: -3rem; padding-top: 4.5rem; } .charge__head { flex-direction: column; gap: .25rem; align-items: center; text-align: center; } } @media (prefers-reduced-motion: reduce) { .button:hover { transform: none; } }