/* ============================================================ THE CONTENT PRODUCER — style.css thecontentproducer.co.uk ============================================================ TABLE OF CONTENTS ───────────────── 1. FONTS — Change your typefaces here 2. COLOUR TOKENS — Change ALL colours here (one place) 3. TYPOGRAPHY — h1–h6, p, a, body text sizes 4. RESET — Browser normalisation (don't touch) 5. UTILITIES — .max, .sec, .label, .hdg 6. BUTTONS — .btn-a (amber), .btn-c (cobalt), .btn-w (white outline) 7. TAGS — .tag-a, .tag-c, .tags 8. NAV — Top navigation bar 9. MOBILE MENU — Full-screen overlay menu 10. HERO — Split hero section 11. MARQUEE — Scrolling ticker bars 12. ABOUT — About section & stats 13. SERVICES — Service cards grid 14. SHOWREEL — Video frame & project strip 15. TRANSMISSION — TCP.FM radio player 16. TESTIMONIALS — Quote cards 17. COLLABORATE — Work with me cards 18. CTA BAND — Full-width call to action 19. FOOTER — Footer grid & social icons 20. ANIMATIONS — Reveal on scroll, transitions ============================================================ */ /* ============================================================ 1. FONTS Change the font names here AND update the Google Fonts link in index.html to match. Current: Bebas Neue (display) · Syne (body) · DM Mono (mono) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@400;500;600;700;800&family=DM+Mono:ital,wght@0,300;0,400;1,300&family=Space+Grotesk:wght@400;500;600;700&display=swap'); :root { --font-display: 'Bebas Neue', sans-serif; /* Headlines, hero title, section titles */ --font-body: 'Space Grotesk', sans-serif; /* Body copy, paragraphs, descriptions */ --font-mono: 'DM Mono', monospace; /* Labels, tags, nav links, eyebrows */ } /* ============================================================ 2. COLOUR TOKENS Every colour in the site flows from these variables. Change a value here and it updates everywhere instantly. ============================================================ */ :root { /* --- Backgrounds (darkest to lightest) --- */ --bg: #080810; /* Page background — deepest black */ --bg2: #0d0d18; /* Alternate section background */ --bg3: #13131f; /* Cards, panels */ --bg4: #1a1a2a; /* Hover states, nested panels */ /* --- Cobalt Blue (primary brand accent) --- */ --cobalt: #1a3fd4; /* Solid cobalt — buttons, fills */ --cobalt2: #2a52f0; /* Lighter cobalt — hovers */ --cobalt3: #0e2a9a; /* Darker cobalt — featured card bg */ --cobalt-l: #6888f8; /* Light cobalt — labels, icons, text */ /* --- Amber Gold (secondary brand accent) --- */ --amber: #e8a020; /* Solid amber — primary CTA button */ --amber2: #f5c050; /* Light amber — button hover */ --amber3: #a06810; /* Dark amber — tag text */ /* --- White / Text scale --- */ --white: #f0eef8; /* Primary text */ --white2: #b0accc; /* Secondary / body copy */ --white3: #60607a; /* Muted / placeholder text */ /* --- Nav height (used throughout for offset) --- */ --nav-h: 76px; } /* ============================================================ 3. TYPOGRAPHY Direct control over all heading levels, body, and links. Font sizes use clamp(min, fluid, max) for responsive scaling. ============================================================ */ /* --- Headings --- */ h1 { font-family: var(--font-display); font-size: clamp(5rem, 18vw, 11rem); line-height: 0.86; letter-spacing: 0.02em; text-transform: uppercase; color: var(--white); } h2 { font-family: var(--font-display); font-size: clamp(2.8rem, 7vw, 6rem); line-height: 0.9; text-transform: uppercase; color: var(--white); margin-bottom: 1.8rem; } h3 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1; text-transform: uppercase; color: var(--white); margin-bottom: 0.7rem; } h4 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 0.5rem; } h5 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cobalt-l); margin-bottom: 0.4rem; } h6 { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white3); } /* --- Body text --- */ p { font-family: var(--font-body); font-size: 0.88rem; line-height: 1.75; color: var(--white2); } p strong { color: var(--white); font-weight: 600; } p em { color: var(--amber); font-style: italic; } /* --- Links (default — not buttons) --- */ a { text-decoration: none; color: var(--cobalt-l); transition: color 0.2s; } a:hover { color: var(--amber); } /* --- Small / mono text --- */ small { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--white3); } /* ============================================================ 4. RESET Browser normalisation. Don't edit unless you know why. ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--white); font-family: var(--font-body); overflow-x: hidden; line-height: 1; } img { max-width: 100%; display: block; } button { cursor: pointer; border: none; background: none; font-family: inherit; } ul, ol { list-style: none; } /* ============================================================ 5. UTILITIES Layout helpers and reusable section patterns. ============================================================ */ /* Max-width container — centred */ .max { max-width: 1200px; margin-inline: auto; } /* Standard section padding */ .sec { padding: 5rem 1.5rem; } @media (min-width: 768px) { .sec { padding: 6rem 2.5rem; } } /* Section eyebrow label (e.g. "01 — Services") */ .label { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--cobalt-l); display: flex; align-items: center; gap: 0.9rem; margin-bottom: 2.5rem; } .label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, rgba(104,136,248,0.3), transparent); } /* Section heading helper class (mirrors h2 with accent spans) */ .hdg { font-family: var(--font-display); font-size: clamp(2.8rem, 7vw, 6rem); line-height: 0.9; text-transform: uppercase; color: var(--white); margin-bottom: 1.8rem; } .hdg .a { color: var(--cobalt-l); } .hdg .c { color: var(--cobalt-l); } /* ============================================================ 6. BUTTONS Three button styles. Extend or duplicate for new variants. ============================================================ */ /* Amber filled — primary CTA */ .btn-a { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; background: var(--amber); color: var(--bg); padding: 0.8rem 1.8rem; display: inline-block; transition: background 0.2s; cursor: pointer; } .btn-a:hover { background: var(--amber2); color: var(--bg); } /* Cobalt outline — secondary CTA */ .btn-c { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; background: transparent; color: var(--cobalt-l); padding: 0.8rem 1.8rem; display: inline-block; border: 1px solid rgba(104,136,248,0.4); transition: border-color 0.2s, background 0.2s; } .btn-c:hover { border-color: var(--cobalt2); background: rgba(26,63,212,0.12); color: var(--cobalt-l); } /* White outline — tertiary / ghost */ .btn-w { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; background: transparent; color: var(--white); padding: 0.8rem 1.8rem; display: inline-block; border: 1px solid rgba(240,238,248,0.2); transition: border-color 0.2s; } .btn-w:hover { border-color: rgba(240,238,248,0.5); color: var(--white); } /* ============================================================ 7. TAGS Small label badges used inside service and collab cards. ============================================================ */ .tag-a { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber3); border: 1px solid rgba(160,104,16,0.3); padding: 0.2rem 0.55rem; background: rgba(232,160,32,0.04); } .tag-c { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cobalt-l); border: 1px solid rgba(26,63,212,0.3); padding: 0.2rem 0.55rem; background: rgba(26,63,212,0.05); } .tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 1.2rem; } /* ============================================================ 8. NAV Fixed top navigation bar. ============================================================ */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 500; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 2.5rem; border-bottom: 1px solid rgba(26,63,212,0.18); background: rgba(8,8,16,0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /*.nav-logo svg { height: 28px; width: auto; display: block; } */ .nav-logo img { width: 80px; /* adjust as needed */ height: auto; display: block;} /* Desktop nav links — hidden on mobile */ .nav-links { display: none; gap: 1.8rem; } @media (min-width: 900px) { .nav-links { display: flex; } } .nav-links a { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white2); transition: color 0.2s; } .nav-links a:hover { color: var(--cobalt-l); } /* Nav CTA button — hidden on mobile */ .nav-cta { display: none; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.5rem 1.2rem; } @media (min-width: 900px) { .nav-cta { display: inline-block; } } /* Hamburger icon — mobile only */ .burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; padding: 6px; cursor: pointer; } @media (min-width: 900px) { .burger { display: none; } } .burger span { display: block; height: 1.5px; background: var(--white); transition: transform 0.3s, opacity 0.3s; transform-origin: center; } /* Burger → X animation when menu is open */ body.menu-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } body.menu-open .burger span:nth-child(2) { opacity: 0; } body.menu-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ============================================================ 9. MOBILE MENU Full-screen overlay that opens when burger is clicked. ============================================================ */ .mobile-menu { display: none; position: fixed; inset: 0; top: var(--nav-h); z-index: 400; background: rgba(8,8,16,0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; } body.menu-open .mobile-menu { display: flex; } .mobile-menu a { font-family: var(--font-display); font-size: 2.8rem; text-transform: uppercase; color: var(--white); letter-spacing: 0.04em; } .mobile-menu a:hover { color: var(--amber); } .mobile-menu .mob-cta { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; background: var(--cobalt); color: var(--white); padding: 1rem 2.5rem; margin-top: 1rem; } /* ============================================================ 10. HERO Full-viewport split layout: copy left, image right. Stacks vertically on mobile. ============================================================ */ .hero { min-height: 100svh; padding-top: var(--nav-h); display: grid; grid-template-rows: 1fr auto; position: relative; overflow: hidden; } @media (min-width: 900px) { .hero { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; } } /* Background FX layers */ .hero-gfx { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero-grid { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(26,63,212,0.06) 59px, rgba(26,63,212,0.06) 60px), repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(26,63,212,0.06) 59px, rgba(26,63,212,0.06) 60px); } .hero-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.07) 3px, rgba(0,0,0,0.07) 4px); } .hero-glow1 { position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(26,63,212,0.28) 0%, transparent 70%); top: 50%; right: -10%; transform: translateY(-50%); } /* Left: copy column */ .hero-copy { position: relative; z-index: 10; display: flex; flex-direction: column; justify-content: center; padding: 3rem 1.5rem 2rem; } @media (min-width: 900px) { .hero-copy { padding: 4rem 3rem 4rem 2.5rem; } } .hero-eye { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--cobalt-l); margin-bottom: 1.8rem; display: flex; align-items: center; gap: 0.8rem; } .hero-eye::before { content: ''; width: 1.4rem; height: 1px; background: var(--cobalt-l); } .hero-title { margin-bottom: 0; } .hero-title .l1 { color: var(--white); } .hero-title .l2 { color: var(--amber); display: block; } .hero-title .l2 { color: transparent; -webkit-text-stroke: 1px rgba(104,136,248,0.28); display: block; } .hero-desc { margin-top: 1.8rem; max-width: 400px; } .hero-btns { display: flex; gap: 0.8rem; margin-top: 1.8rem; flex-wrap: wrap; } .hero-stats { display: flex; gap: 2rem; margin-top: 2.5rem; flex-wrap: wrap; Display:none; } .stat-n { font-family: var(--font-display); font-size: 2.5rem; line-height: 1; color: var(--amber); } .stat-n.c { color: var(--cobalt-l); } .stat-l { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white3); margin-top: 0.2rem; } /* Right: image column */ .hero-img { position: relative; overflow: hidden; min-height: 55vw; } @media (min-width: 900px) { .hero-img { min-height: unset; } } .hero-img-inner { position: absolute; inset: 0; background: var(--bg3); display: flex; align-items: center; justify-content: center; } /* Left gradient bleed on desktop */ .hero-img-inner::before { content: ''; position: absolute; inset: 0; z-index: 3; background: linear-gradient(to right, var(--bg) 0%, transparent 35%); } /* Bottom fade */ .hero-img-inner::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 35%; z-index: 3; background: linear-gradient(to top, var(--bg) 0%, transparent 100%); } @media (max-width: 899px) { .hero-img-inner::before { display: none; } } .cobalt-glow { position: absolute; width: 480px; height: 480px; background: radial-gradient(circle, rgba(26,63,212,0.38) 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; } .amber-glow { position: absolute; width: 260px; height: 260px; background: radial-gradient(circle, rgba(232,160,32,0.12) 0%, transparent 70%); bottom: 0; right: 0; z-index: 1; } /* Corner bracket marks */ .corner { position: absolute; width: 18px; height: 18px; z-index: 6; } .c-tl { top: 40rem; left: 1.2rem; border-top: 1px solid var(--amber); border-left: 1px solid var(--amber); } .c-tr { top: 1.2rem; right: 1.2rem; border-top: 1px solid var(--amber); border-right: 1px solid var(--amber); } .c-bl { bottom: 40rem; left: 1.2rem; border-bottom: 1px solid var(--amber); border-left: 1px solid var(--amber); } .c-br { bottom: 1.2rem; right: 1.2rem; border-bottom: 1px solid var(--amber); border-right: 1px solid var(--amber); } /* Image upload zone */ .hero-upload-zone { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; padding: 2rem; } .upload-icon { width: 60px; height: 60px; border: 1px solid rgba(104,136,248,0.4); background: rgba(26,63,212,0.08); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.8rem; } .upload-lbl { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cobalt-l); } .upload-sub { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.1em; color: var(--white3); margin-top: 0.3rem; } /* Actual image once uploaded */ .hero-actual-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: 2; display: none; } body.has-hero .hero-upload-zone > :not(.hero-actual-img) { display: none; } body.has-hero .hero-actual-img { display: block; } /* Name overlay on image */ .name-overlay { position: absolute; bottom: 2rem; left: 1.5rem; z-index: 8; } .name-overlay .nm { font-family: var(--font-display); font-size: 1.6rem; text-transform: uppercase; color: var(--white); line-height: 1; } .name-overlay .tl { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); margin-top: 0.2rem; } /* Live ticker bar at base of hero */ .ticker-bar { position: relative; z-index: 10; grid-column: 1 / -1; border-top: 1px solid rgba(26,63,212,0.22); padding: 0.7rem 1.5rem; display: flex; align-items: center; gap: 1.2rem; overflow: hidden; background: rgba(8,8,16,0.7); } .tick-lbl { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cobalt-l); flex-shrink: 0; display: flex; align-items: center; gap: 0.5rem; } .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); animation: pip 1.8s ease-in-out infinite; } @keyframes pip { 0%,100% { opacity:1; } 50% { opacity:0.15; } } .tick-track { flex: 1; overflow: hidden; } .tick-inner { display: flex; animation: tick 32s linear infinite; white-space: nowrap; } .tick-inner span { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white3); padding: 0 1.4rem; } .tick-inner .sep { color: var(--cobalt); padding: 0; } @keyframes tick { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ============================================================ 11. MARQUEE Scrolling text bars between sections. .mq-a = amber | .mq-c = cobalt ============================================================ */ .mq { overflow: hidden; white-space: nowrap; padding: 0.6rem 0; } .mq-a { background: var(--amber); } .mq-c { background: var(--cobalt3); } .mq-inner { display: inline-flex; animation: mq 22s linear infinite; } .mq-a .mq-inner span { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bg); padding: 0 1.8rem; } .mq-c .mq-inner span { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(104,136,248,0.65); padding: 0 1.8rem; } .mq-inner .dot { opacity: 0.3; padding: 0 0.5rem; } @keyframes mq { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ============================================================ 12. ABOUT ============================================================ */ .about-grid { display: grid; gap: 3.5rem; grid-template-columns: 1fr; } @media (min-width: 768px) { .about-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } } .about-quote { font-family: var(--font-display); font-size: clamp(2.8rem, 7vw, 6rem); line-height: 0.92; text-transform: uppercase; color: var(--white); margin-bottom: 2rem; } /* Stats row under quote */ .stat-row { display: none; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(26,63,212,0.18); border: 1px solid rgba(26,63,212,0.18); margin-top: 2.5rem; } .stat-box { background: var(--bg); padding: 1.3rem 1rem; } .sn { font-family: var(--font-display); font-size: 2.8rem; line-height: 1; display: block; } .sn-a { color: var(--amber); } .sn-c { color: var(--cobalt-l); } .sl { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white3); margin-top: 0.3rem; display: block; } .about-body p { margin-bottom: 1.1rem; } .about-body p:last-child { margin-bottom: 0; } /* ============================================================ 13. SERVICES ============================================================ */ .svc-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(26,63,212,0.1); border: 1px solid rgba(26,63,212,0.1); } @media (min-width: 600px) { .svc-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } } .svc-card { background: var(--bg2); padding: 2rem 1.6rem; cursor: pointer; transition: background 0.2s; position: relative; } .svc-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, var(--cobalt), var(--amber)); transform: scaleX(0); transform-origin: left; transition: transform 0.35s; } .svc-card:hover { background: var(--bg3); } .svc-card:hover::after { transform: scaleX(1); } .svc-num { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.2em; color: var(--cobalt-l); margin-bottom: 1rem; display: block; } .svc-title { font-family: var(--font-display); font-size: 1.7rem; text-transform: uppercase; color: var(--white); line-height: 1; margin-bottom: 0.7rem; } .svc-desc { font-size: 0.8rem; line-height: 1.6; color: var(--white3); } /* ============================================================ 14. SHOWREEL ============================================================ */ .vid-frame { background: var(--bg3); border: 1px solid rgba(26,63,212,0.2); aspect-ratio: 2.39 / 1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; cursor: pointer; transition: border-color 0.3s; } .vid-frame:hover { border-color: rgba(104,136,248,0.4); } .vid-frame:hover .play-ring { border-color: var(--amber); } .vid-bg { position: absolute; font-family: var(--font-display); font-size: min(22vw, 18rem); color: transparent; -webkit-text-stroke: 1px rgba(26,63,212,0.05); top: 50%; left: 50%; transform: translate(-50%,-50%); white-space: nowrap; pointer-events: none; } .play-ring { width: 72px; height: 72px; border: 1.5px solid var(--cobalt-l); display: flex; align-items: center; justify-content: center; transition: border-color 0.3s; z-index: 2; position: relative; margin: 0 auto; } .vid-lbl { text-align: center; z-index: 2; position: relative; margin-top: 1.2rem; } .vid-title { font-family: var(--font-display); font-size: clamp(1rem,3vw,1.5rem); text-transform: uppercase; color: var(--white); } .vid-meta { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.14em; color: var(--white3); margin-top: 0.3rem; } .asp-badge { position: absolute; bottom: 1rem; right: 1rem; font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.14em; color: var(--cobalt-l); border: 1px solid rgba(26,63,212,0.3); padding: 0.2rem 0.5rem; } /* Project thumbnail strip */ .proj-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(26,63,212,0.1); border: 1px solid rgba(26,63,212,0.1); border-top: none; } @media (min-width: 600px) { .proj-strip { grid-template-columns: repeat(4, 1fr); } } .proj-card { background: var(--bg3); padding: 1.3rem; cursor: pointer; transition: background 0.2s, border-bottom-color 0.2s; border-bottom: 2px solid transparent; } .proj-card:hover { background: var(--bg4); border-bottom-color: var(--amber); } .proj-n { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.15em; color: var(--cobalt-l); margin-bottom: 0.35rem; display: block; } .proj-t { font-family: var(--font-display); font-size: 1rem; text-transform: uppercase; color: var(--white); line-height: 1.1; margin-bottom: 0.25rem; } .proj-s { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white3); } /* ============================================================ 15. TRANSMISSION — TCP.FM Radio Player ============================================================ */ .tx-section { background: var(--bg2); padding: 5.5rem 1.5rem; position: relative; overflow: hidden; } @media (min-width: 768px) { .tx-section { padding: 5.5rem 2.5rem; } } .tx-bg { position: absolute; font-family: var(--font-display); font-size: min(26vw, 22rem); color: transparent; -webkit-text-stroke: 1px rgba(26,63,212,0.05); top: 50%; left: -3%; transform: translateY(-50%); pointer-events: none; line-height: 1; white-space: nowrap; } .tx-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; } @media (min-width: 768px) { .tx-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } } /* Radio player box */ .radio-box { background: var(--bg3); border: 1px solid rgba(26,63,212,0.25); padding: 1.8rem; } .live-row { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; } .live-pip { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); animation: pip2 2s ease-in-out infinite; } @keyframes pip2 { 0%,100% { box-shadow: 0 0 0 3px rgba(232,160,32,0.15); } 50% { box-shadow: 0 0 0 7px rgba(232,160,32,0.04); } } .live-txt { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); } .radio-name { font-family: var(--font-display); font-size: 2.6rem; text-transform: uppercase; color: var(--white); line-height: 1; } .radio-name span { color: var(--amber); } .radio-freq { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.2em; color: var(--cobalt-l); text-transform: uppercase; margin: 0.3rem 0 1.2rem; } .now-l { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white3); } .now-t { font-family: var(--font-body); font-size: 0.88rem; font-weight: 700; color: var(--white); margin: 0.2rem 0 1.2rem; } .prog { height: 2px; background: rgba(26,63,212,0.2); margin-bottom: 0.4rem; overflow: hidden; } .prog-fill { height: 100%; background: linear-gradient(to right, var(--cobalt), var(--amber)); animation: prg 50s linear infinite; } @keyframes prg { 0% { width: 0; } 100% { width: 100%; } } .time-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.52rem; color: var(--white3); margin-bottom: 1.4rem; } .ctrl-row { display: flex; align-items: center; gap: 0.7rem; } .c-btn { width: 36px; height: 36px; border: 1px solid rgba(26,63,212,0.25); color: var(--white); display: flex; align-items: center; justify-content: center; transition: border-color 0.2s; } .c-btn:hover { border-color: var(--cobalt-l); } .c-play { width: 44px; height: 44px; background: linear-gradient(135deg, var(--cobalt), var(--cobalt2)); color: var(--white); display: flex; align-items: center; justify-content: center; transition: opacity 0.2s; } .c-play:hover { opacity: 0.85; } .vol-bar { flex: 1; margin-left: 0.5rem; } .vol-track { height: 2px; background: rgba(26,63,212,0.15); } .vol-fill { height: 100%; width: 65%; background: linear-gradient(to right, var(--cobalt), var(--amber)); } .vol-lbl { font-family: var(--font-mono); font-size: 0.5rem; color: var(--white3); margin-top: 0.3rem; text-align: right; } .up-next { background: var(--bg4); border: 1px solid rgba(26,63,212,0.15); border-top: none; padding: 1.1rem; } .up-next-hd { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white3); margin-bottom: 0.7rem; } .up-next-row { display: flex; justify-content: space-between; margin-bottom: 0.45rem; } .up-next-row span:first-child { font-size: 0.8rem; color: var(--white2); } .up-next-row span:last-child { font-family: var(--font-mono); font-size: 0.52rem; color: var(--white3); } /* DJ personality cards */ .dj-slots { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.2rem; } .dj-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.8rem; background: var(--bg4); border: 1px solid rgba(26,63,212,0.1); cursor: pointer; transition: border-color 0.2s; } .dj-row:hover { border-color: rgba(26,63,212,0.35); } .dj-av { width: 30px; height: 30px; flex-shrink: 0; background: var(--cobalt3); border: 1px solid rgba(26,63,212,0.3); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.5rem; color: var(--cobalt-l); letter-spacing: 0.04em; } .dj-av-a { background: rgba(160,104,16,0.15); color: var(--amber); border-color: rgba(160,104,16,0.3); } .dj-nm { font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; color: var(--white); } .dj-bio { font-family: var(--font-mono); font-size: 0.5rem; color: var(--white3); margin-top: 0.1rem; letter-spacing: 0.04em; } /* ============================================================ 16. TESTIMONIALS ============================================================ */ .testi-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(26,63,212,0.1); border: 1px solid rgba(26,63,212,0.1); } @media (min-width: 600px) { .testi-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .testi-grid { grid-template-columns: repeat(3, 1fr); } } .testi { background: var(--bg2); padding: 1.8rem 1.5rem; } .testi-mark { font-family: var(--font-display); font-size: 3.2rem; line-height: 0.7; color: var(--amber); opacity: 0.5; margin-bottom: 0.7rem; } .testi-text { font-size: 0.84rem; line-height: 1.7; color: var(--white2); font-style: italic; margin-bottom: 1.2rem; } .testi-name { font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 0.05em; } .testi-role { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.1em; color: var(--cobalt-l); text-transform: uppercase; margin-top: 0.2rem; } /* ============================================================ 17. COLLABORATE ============================================================ */ .collab-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(26,63,212,0.1); border: 1px solid rgba(26,63,212,0.1); } @media (min-width: 600px) { .collab-grid { grid-template-columns: 1fr 1fr; } } .col-card { background: var(--bg); padding: 2.5rem 2rem; position: relative; overflow: hidden; cursor: pointer; transition: background 0.2s; } .col-card:hover { background: var(--bg3); } .col-card.feat { background: linear-gradient(135deg, var(--cobalt3), var(--cobalt)); } .col-card.feat:hover { background: linear-gradient(135deg, var(--cobalt), var(--cobalt2)); } .col-acc { position: absolute; top: 1.2rem; right: 1.4rem; font-family: var(--font-display); font-size: 4.5rem; color: rgba(255,255,255,0.04); line-height: 1; } .col-num { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.2em; color: var(--cobalt-l); margin-bottom: 0.7rem; display: block; } .col-card.feat .col-num { color: rgba(255,255,255,0.45); } .col-title { font-family: var(--font-display); font-size: 1.9rem; text-transform: uppercase; color: var(--white); line-height: 1; margin-bottom: 0.65rem; } .col-desc { font-size: 0.82rem; line-height: 1.6; color: var(--white2); margin-bottom: 1.2rem; } .col-card.feat .col-desc { color: rgba(255,255,255,0.72); } /* ============================================================ 18. CTA BAND ============================================================ */ .cta-band { background: #080810;); border-top: 1px solid rgba(26,63,212,0.2); border-bottom: 1px solid rgba(26,63,212,0.2); padding: 4rem 1.5rem; } @media (min-width: 768px) { .cta-band { padding: 4rem 2.5rem; } } .cta-inner { max-width: 1200px; margin-inline: auto; display: flex; flex-direction: column; gap: 2rem; align-items: flex-start; } @media (min-width: 768px) { .cta-inner { flex-direction: row; align-items: center; justify-content: space-between; } } .cta-title { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 4.8rem); text-transform: uppercase; line-height: 0.9; color: var(--white); } .cta-title em { color: var(--amber); font-style: normal; } .cta-right { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; } @media (min-width: 768px) { .cta-right { align-items: flex-end; } } /* ============================================================ 19. FOOTER ============================================================ */ footer { background: var(--bg2); padding: 4rem 1.5rem 2.5rem; border-top: 1px solid rgba(26,63,212,0.14); } @media (min-width: 768px) { footer { padding: 5rem 2.5rem 3rem; } } .foot-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; max-width: 1200px; margin-inline: auto; margin-bottom: 3rem; } @media (min-width: 600px) { .foot-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .foot-grid { grid-template-columns: 1.2fr 1fr 1fr; } } .foot-logo { font-family: var(--font-display); font-size: 2.8rem; line-height: 0.9; text-transform: uppercase; color: var(--white); } .foot-logo span { color: var(--amber); } .foot-logo .sub { color: var(--cobalt-l); } .foot-tag { font-size: 0.82rem; color: var(--white3); line-height: 1.6; max-width: 250px; margin-top: 0.7rem; } .foot-hd { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cobalt-l); margin-bottom: 0.9rem; } .foot-nav { display: flex; flex-direction: column; gap: 0.45rem; } .foot-nav a { font-size: 0.82rem; color: var(--white2); transition: color 0.2s; } .foot-nav a:hover { color: var(--amber); } .foot-bar { border-top: 1px solid rgba(26,63,212,0.1); padding-top: 1.6rem; max-width: 1200px; margin-inline: auto; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; } @media (min-width: 600px) { .foot-bar { flex-direction: row; align-items: center; justify-content: space-between; } } .foot-copy { font-family: var(--font-mono); font-size: 0.54rem; letter-spacing: 0.08em; color: var(--white3); } /* Social icon row */ .foot-soc { display: flex; gap: 1.2rem; align-items: center; } .soc-icon { color: rgba(240,238,248,0.4); display: flex; align-items: center; justify-content: center; transition: color 0.2s, transform 0.2s; } .soc-icon:hover { color: var(--white); transform: translateY(-2px); } .soc-icon svg { display: block; } /* ============================================================ 20. ANIMATIONS Scroll-triggered reveal and global transitions. ============================================================ */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.65s ease, transform 0.65s ease; } .reveal.vis { opacity: 1; transform: translateY(0); } /* ============================================================ 21. VIDEO MODAL LIGHTBOX Premium full-screen video player. ============================================================ */ /* Outer shell — hidden by default */ .vid-modal { display: none; position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center; padding: 1.5rem; } /* Show when open */ .vid-modal.is-open { display: flex; } /* Blurred dark backdrop */ .vid-modal-backdrop { position: absolute; inset: 0; background: rgba(4, 4, 12, 0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transition: opacity 0.35s ease; cursor: pointer; } .vid-modal.is-visible .vid-modal-backdrop { opacity: 1; } /* Inner panel — slides up on open */ .vid-modal-inner { position: relative; z-index: 2; width: 100%; max-width: 1100px; opacity: 0; transform: translateY(28px) scale(0.98); transition: opacity 0.35s ease, transform 0.35s ease; } .vid-modal.is-visible .vid-modal-inner { opacity: 1; transform: translateY(0) scale(1); } /* Amber corner bracket marks */ .vid-modal-inner::before, .vid-modal-inner::after { content: ''; position: absolute; width: 22px; height: 22px; z-index: 3; pointer-events: none; transition: opacity 0.35s ease; } .vid-modal-inner::before { top: -10px; left: -10px; border-top: 1px solid var(--amber); border-left: 1px solid var(--amber); } .vid-modal-inner::after { bottom: -10px; right: -10px; border-bottom: 1px solid var(--amber); border-right: 1px solid var(--amber); } /* Top bar */ .vid-modal-bar { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 1rem; margin-bottom: 0; border-bottom: 1px solid rgba(26,63,212,0.3); gap: 1rem; flex-wrap: wrap; } .vid-modal-title { display: flex; flex-direction: column; gap: 0.15rem; } .vid-modal-num { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cobalt-l); } .vid-modal-name { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2.2rem); text-transform: uppercase; color: var(--white); line-height: 1; } .vid-modal-type { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); margin-top: 0.1rem; } /* Close button */ .vid-modal-close { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white2); background: none; border: 1px solid rgba(255,255,255,0.15); padding: 0.55rem 1.1rem; cursor: pointer; transition: border-color 0.2s, color 0.2s; flex-shrink: 0; } .vid-modal-close:hover { border-color: var(--amber); color: var(--amber); } /* Video container — locked to 2.39:1 */ .vid-modal-video-wrap { position: relative; width: 100%; padding-bottom: 41.84%; height: 0; background: #000; border: 1px solid rgba(26,63,212,0.25); border-top: none; } .vid-modal-video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: block; } /* Bottom meta strip */ .vid-modal-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0 0; border-top: 1px solid rgba(26,63,212,0.2); margin-top: 0; flex-wrap: wrap; gap: 0.5rem; } .vid-modal-badge { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cobalt-l); border: 1px solid rgba(26,63,212,0.3); padding: 0.2rem 0.55rem; } .vid-modal-brand { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white3); } /* Project card hover state — play hint icon */ .proj-card { cursor: pointer; position: relative; } .proj-play-hint { position: absolute; top: 1rem; right: 1rem; width: 28px; height: 28px; border: 1px solid rgba(232,160,32,0.3); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s, border-color 0.2s; background: rgba(8,8,16,0.7); } .proj-card:hover .proj-play-hint { opacity: 1; border-color: var(--amber); } .proj-card:focus .proj-play-hint { opacity: 1; } /* ============================================================ 22. SHOWREEL PLAY OVERLAY Sits on top of the video. Fades out when playing, fades back in when paused or ended. ============================================================ */ .vid-frame { position: relative; /* ensure children position correctly */ } .vid-play-overlay { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; background: linear-gradient(135deg, rgba(8,8,16,0.6) 0%, rgba(26,63,212,0.12) 100%); cursor: pointer; transition: opacity 0.3s ease; } .vid-play-overlay.is-hidden { opacity: 0; pointer-events: none; } .vid-play-btn { width: 80px; height: 80px; border: 1.5px solid var(--amber); display: flex; align-items: center; justify-content: center; background: rgba(8,8,16,0.55); transition: background 0.25s, transform 0.25s, border-color 0.25s; } .vid-play-overlay:hover .vid-play-btn { background: rgba(232,160,32,0.15); border-color: var(--amber2); transform: scale(1.06); } .vid-play-label { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--white2); transition: color 0.25s; } .vid-play-overlay:hover .vid-play-label { color: var(--amber); } /* ============================================================ 23. SHOWREEL PAUSE HINT Small pause icon appears in the corner on hover while the video is playing, so user knows they can click. ============================================================ */ .vid-pause-hint { position: absolute; bottom: 1.2rem; left: 1.2rem; z-index: 6; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } /* Show on hover when video is playing — toggled via JS class */ .vid-frame.is-playing:hover .vid-pause-hint { opacity: 1; } .vid-pause-btn { width: 44px; height: 44px; background: rgba(8,8,16,0.7); border: 1px solid rgba(240,238,248,0.2); display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, background 0.2s; } .vid-frame.is-playing:hover .vid-pause-btn { border-color: var(--white2); background: rgba(8,8,16,0.85); } /* ============================================================ 24. HERO — FULL-BLEED IMAGE REBUILD Replaces the split two-column layout with a single full-viewport panel. Image sits behind everything. ============================================================ */ /* Override the grid layout — single column, full bleed */ .hero { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100svh; padding-top: var(--nav-h); position: relative; overflow: hidden; grid-template-columns: unset; grid-template-rows: unset; } /* Full-bleed background image */ .hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: 0; display: block; max-width: unset; } /* Gradient overlay — dark at bottom for legibility, vignette on left */ .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(8,8,16,0.95) 0%, rgba(8,8,16,0.5) 40%, transparent 75%), linear-gradient(to right, rgba(8,8,16,0.75) 0%, rgba(8,8,16,0.2) 60%, transparent 100%); } /* Copy sits above the image */ .hero-copy { position: relative; z-index: 10; padding: 0 1.5rem 3rem; max-width: 700px; } @media (min-width: 768px) { .hero-copy { padding: 0 2.5rem 4rem; } } /* Corner marks — relative to the section */ .hero .corner { position: absolute; z-index: 10; } .hero .c-tl { top: calc(var(--nav-h) + 1.2rem); left: 40rem; } .hero .c-tr { top: calc(var(--nav-h) + 1.2rem); right: 1.5rem; } .hero .c-bl { bottom: 4.5rem; left: 40rem; } .hero .c-br { bottom: 4.5rem; right: 1.5rem; } /* Ticker sits at the very bottom */ .ticker-bar { position: relative; z-index: 10; } /* Hide old split-layout elements that no longer exist */ .hero-gfx, .hero-img, .hero-grid, .hero-scan, .hero-glow1 { display: none; } /* ============================================================ 25. FOOTER SVG LOGO ============================================================ */ .foot-logo-link { display: inline-block; margin-bottom: 1rem; transition: opacity 0.2s; } .foot-logo-link:hover { opacity: 0.75; } .foot-logo-svg { height: 52px; width: auto; display: block; } .foot-cls { fill: var(--white); }