/* ============================================================
mobile.css — Ignited Future
Paste into
every page's , after your existing styles.
Upload to public_html root alongside your HTML files.
============================================================ */
/* ── 3D HEADING TREATMENT ──────────────────────────────────────────────────
Applied via JS (see bottom of this file) to all h1, h2 on the site.
Uses a consistent top-left light source — shadows fall bottom-right.
Colour-matched per heading colour so it always reads correctly.
─────────────────────────────────────────────────────────────────────── */
/* Cream/white headings (hero titles, dark-bg h2s) */
h1,
h2,
.stitle-light,
.ph-title,
.keynote-title,
.noise-headline {
text-shadow:
1px 1px 0 rgba(0, 0, 0, 0.75),
2px 2px 0 rgba(0, 0, 0, 0.60),
3px 3px 0 rgba(0, 0, 0, 0.40),
4px 4px 0 rgba(0, 0, 0, 0.22),
5px 5px 0 rgba(0, 0, 0, 0.10),
6px 6px 14px rgba(0, 0, 0, 0.45);
}
/* Italic teal em spans inside dark-bg headings */
h1 em,
h2 em,
.hero-title em,
.keynote-title em {
text-shadow:
1px 1px 0 rgba(0, 35, 25, 0.90),
2px 2px 0 rgba(0, 35, 25, 0.70),
3px 3px 0 rgba(0, 35, 25, 0.48),
4px 4px 0 rgba(0, 35, 25, 0.26),
5px 5px 0 rgba(0, 35, 25, 0.12),
6px 6px 14px rgba(0, 0, 0, 0.45);
}
/* Amber italic em spans (keynote name, noise headline) */
.noise-headline em,
.keynote-title em[style*="amber"],
.stitle em {
text-shadow:
1px 1px 0 rgba(50, 22, 0, 0.90),
2px 2px 0 rgba(50, 22, 0, 0.70),
3px 3px 0 rgba(50, 22, 0, 0.48),
4px 4px 0 rgba(50, 22, 0, 0.26),
5px 5px 0 rgba(50, 22, 0, 0.12),
6px 6px 14px rgba(0, 0, 0, 0.40);
}
/* Dark-background h2 — light section headings (surface/white bg) */
.stitle,
.about-quote,
h2[style*="color:#1a110a"],
h2[style*="color: #1a110a"] {
text-shadow:
1px 1px 0 rgba(0, 0, 0, 0.12),
2px 2px 0 rgba(0, 0, 0, 0.08),
3px 3px 0 rgba(0, 0, 0, 0.05),
4px 4px 10px rgba(0, 0, 0, 0.12);
}
/* ── TUNE LETTER FIX ────────────────────────────────────────────────────────
The T U N E letters inside the black boxes are rgba(31,170,150,0.12)
— only 12% opacity, making them invisible. Override to full teal.
We target the specific inline-style parent to avoid false positives.
─────────────────────────────────────────────────────────────────────── */
/* Target the TUNE letter divs specifically — they live in #1a110a boxes */
[style*="background:#1a110a"] [style*="font-size:72px"],
[style*="background: #1a110a"] [style*="font-size:72px"] {
color: #1faa96 !important;
opacity: 0.72 !important;
text-shadow:
1px 1px 0 rgba(0, 35, 25, 0.80),
2px 2px 0 rgba(0, 35, 25, 0.55),
3px 3px 0 rgba(0, 35, 25, 0.30),
4px 4px 8px rgba(0, 0, 0, 0.50);
}
/* Boost the word labels and description text in TUNE boxes */
[style*="background:#1a110a"] [style*="letter-spacing:.16em"],
[style*="background: #1a110a"] [style*="letter-spacing:.16em"] {
color: #1faa96 !important;
letter-spacing: 0.18em !important;
}
[style*="background:#1a110a"] p,
[style*="background: #1a110a"] p {
color: rgba(250, 247, 242, 0.82) !important;
}
/* ── MOBILE LAYOUT FIXES ────────────────────────────────────────────────────
Breakpoint 1: 1000px — collapse two-column layouts
─────────────────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
/* Hero — stack content above card */
.hero-inner {
grid-template-columns: 1fr !important;
gap: 40px !important;
padding: 80px 0 60px !important;
}
/* Hide the hero card on smaller screens — content is what matters */
.hero-card {
display: none !important;
}
/* About strip — stack */
.about-inner {
grid-template-columns: 1fr !important;
gap: 40px !important;
}
/* Keynote/training/consulting feature bands — stack */
.keynote-inner {
grid-template-columns: 1fr !important;
gap: 40px !important;
}
/* Footer — two column on tablet */
.footer-top {
grid-template-columns: 1fr 1fr !important;
gap: 32px !important;
}
/* TUNE framework — outer two-column layout */
[style*="grid-template-columns:1fr 1fr;gap:80px"] {
display: block !important;
}
/* TUNE cards — keep 2x2 on tablet, collapse later */
[style*="grid-template-columns:1fr 1fr;gap:2px"] {
grid-template-columns: 1fr 1fr !important;
margin-top: 40px;
}
/* Section padding reduction */
.section,
.about-strip,
.keynote-band {
padding: 64px 0 !important;
}
}
/* ── Breakpoint 2: 768px — phone landscape and small tablets ── */
@media (max-width: 768px) {
/* Three service cards — stack to single column */
.svc-cards,
.svc-cards-grid,
[style*="display:grid;grid-template-columns:repeat(3,1fr)"],
[style*="display: grid; grid-template-columns: repeat(3, 1fr)"] {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
/* Each service card — sensible height */
.svc-card,
.svc-cards-grid > a {
min-height: 360px !important;
border-radius: 12px !important;
}
.svc-card-inner {
min-height: 360px !important;
padding: 32px 28px 28px !important;
}
/* Hero stats — wrap and reduce gap */
.hero-stats {
gap: 20px !important;
flex-wrap: wrap;
}
/* Hero actions — stack buttons */
.hero-actions,
.ph-actions {
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px !important;
}
/* Hero text size */
.hero-title {
font-size: clamp(36px, 9vw, 52px) !important;
}
/* Keynote bands text */
.keynote-title {
font-size: clamp(28px, 7vw, 42px) !important;
}
/* Section headings */
.stitle, .stitle-light {
font-size: clamp(24px, 7vw, 36px) !important;
}
}
/* ── Breakpoint 3: 600px — phones portrait ── */
@media (max-width: 600px) {
/* Global width — give breathing room */
:root {
--w: calc(100% - 32px) !important;
}
/* TUNE 2×2 → 1 column */
[style*="grid-template-columns:1fr 1fr;gap:2px"],
[style*="grid-template-columns: 1fr 1fr; gap: 2px"] {
grid-template-columns: 1fr !important;
gap: 2px !important;
}
/* TUNE boxes — reduce padding */
[style*="background:#1a110a"][style*="padding:40px 32px"],
[style*="background: #1a110a"][style*="padding: 40px 32px"] {
padding: 28px 22px !important;
}
/* TUNE letter size — scale down */
[style*="background:#1a110a"] [style*="font-size:72px"],
[style*="background: #1a110a"] [style*="font-size:72px"] {
font-size: 52px !important;
}
/* Section padding */
.section,
.about-strip,
.keynote-band,
[style*="padding:88px 0"],
[style*="padding:96px 0"] {
padding: 52px 0 !important;
}
/* Keynote bands — adjust inner padding */
.keynote-inner {
padding: 0 !important;
}
/* Footer — single column */
.footer-top {
grid-template-columns: 1fr !important;
gap: 28px !important;
}
.footer-btm {
flex-direction: column !important;
gap: 8px !important;
text-align: center !important;
}
/* Hero stats layout */
.hero-stats {
flex-direction: row;
flex-wrap: wrap;
gap: 16px !important;
}
/* CTA buttons */
.cta-buttons {
flex-direction: column !important;
align-items: center !important;
}
/* Proof logos — tighter gap */
.proof-row {
gap: 20px 28px !important;
}
.proof-logo-svg {
height: 28px !important;
}
/* Noise strip sub */
.noise-sub {
font-size: 14px !important;
padding: 0 8px;
}
/* About quote */
.about-quote {
font-size: clamp(18px, 5vw, 24px) !important;
}
/* Nav mobile padding */
.nav-inner {
padding: 0 16px !important;
}
/* Inline-style section with white bg TUNE — override width */
[style*="width:min(1160px"] {
width: calc(100% - 32px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Keynote points — reduce size */
.kp-text {
font-size: 13px !important;
}
/* CTA final section */
.cta-final {
padding: 64px 0 !important;
}
.cta-final h2 {
font-size: clamp(26px, 7vw, 38px) !important;
}
/* WhatsApp button position — avoid bottom bar */
a[href*="wa.me"] {
bottom: 20px !important;
right: 16px !important;
width: 50px !important;
height: 50px !important;
}
}
/* ── NAV MOBILE — ensure burger always shows correctly ── */
@media (max-width: 900px) {
.nav-links,
.nav-cta {
display: none !important;
}
.nav-burger {
display: flex !important;
}
}
/* ── NOISE STRIP — centre properly on mobile ── */
@media (max-width: 600px) {
.noise-strip-inner {
padding: 0 4px;
}
.noise-headline {
font-size: clamp(26px, 8vw, 42px) !important;
}
}
/* ── PAGE HERO (subpages) — fix on mobile ── */
@media (max-width: 768px) {
.page-hero {
padding: 64px 0 52px !important;
}
.ph-title {
font-size: clamp(32px, 8vw, 52px) !important;
}
.ph-sub {
font-size: 16px !important;
}
/* Two-col and two-col-wide on subpages */
.two-col,
.two-col-wide {
grid-template-columns: 1fr !important;
gap: 40px !important;
}
}
/* ── NOISE.HTML SPECIFIC ── */
@media (max-width: 768px) {
.noise-sources {
grid-template-columns: 1fr !important;
}
.tune-steps {
grid-template-columns: repeat(2, 1fr) !important;
}
.format-grid {
grid-template-columns: 1fr !important;
}
.speaking-cards {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 480px) {
.tune-steps {
grid-template-columns: 1fr !important;
}
.noise-sources {
grid-template-columns: 1fr !important;
}
}
/* ── SERVICE CARDS — mobile fix ─────────────────────────────────────────────
On mobile, position:absolute backgrounds don't stretch with content.
We set the background directly on the card and hide the absolute div.
─────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
/* Stack all 3 cards vertically */
[style*="grid-template-columns:repeat(3,1fr)"] {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
/* Give each card its own background so it fills correctly at any height */
/* Speaking — purple */
[style*="grid-template-columns:repeat(3,1fr)"] > a:nth-child(1) {
background: linear-gradient(145deg,#1a1640,#251e5a 60%,#130e38) !important;
border-radius: 14px !important;
overflow: hidden !important;
min-height: unset !important;
}
/* Training — teal */
[style*="grid-template-columns:repeat(3,1fr)"] > a:nth-child(2) {
background: linear-gradient(145deg,#0a2018,#163828 60%,#081808) !important;
border-radius: 14px !important;
overflow: hidden !important;
min-height: unset !important;
}
/* Consulting — amber */
[style*="grid-template-columns:repeat(3,1fr)"] > a:nth-child(3) {
background: linear-gradient(145deg,#1e0e00,#3a1e08 60%,#160a00) !important;
border-radius: 14px !important;
overflow: hidden !important;
min-height: unset !important;
}
/* Hide the absolute background divs — card carries the colour now */
[style*="grid-template-columns:repeat(3,1fr)"] > a > div[style*="position:absolute;inset:0"] {
display: none !important;
}
/* The coloured top bar — keep it, make it position:relative so it flows */
[style*="grid-template-columns:repeat(3,1fr)"] > a > div[style*="position:absolute;top:0;left:0;right:0;height:3px"] {
position: relative !important;
top: unset !important;
left: unset !important;
right: unset !important;
width: 100% !important;
height: 3px !important;
display: block !important;
}
/* The content div — remove min-height, let content define the height */
[style*="grid-template-columns:repeat(3,1fr)"] > a > div[style*="position:relative;z-index:5"] {
min-height: unset !important;
padding: 32px 28px 28px !important;
}
}
@media (max-width: 600px) {
[style*="grid-template-columns:repeat(3,1fr)"] > a > div[style*="position:relative;z-index:5"] {
padding: 28px 22px 24px !important;
}
}