/* ============================================================= FanChants Licensing — site styles Built on top of styles/brand.css (tokens, type scale, soundwave, buttons, badges, reveal utility, motion-reduce gates). ============================================================= */ html { scroll-behavior: smooth; } body { background: var(--fc-black); color: var(--fc-white); font-family: var(--fc-font-body); line-height: 1.5; font-size: 17px; } /* Accent token — the homepage can recolour this via the tweaks panel or by setting [data-accent] on . Default Electric. */ :root { --fc-accent: #D0E600; --fc-accent-on: #000000; --fc-accent-hover: #B8CC00; } html[data-accent="orange"] { --fc-accent: #FF5A1F; --fc-accent-on: #FFFFFF; --fc-accent-hover: #e84a13; } html[data-accent="volt"] { --fc-accent: #D0E600; --fc-accent-on: #000000; --fc-accent-hover: #B8CC00; } html[data-accent="bubblegum"] { --fc-accent: #FF6FB1; --fc-accent-on: #000000; --fc-accent-hover: #f15ea0; } ::selection { background: var(--fc-accent); color: var(--fc-accent-on); } a { color: inherit; text-decoration: none; cursor: pointer; } /* Make every link feel clickable. */ a:not(.button):not(.topbar__cta):not(.topbar__nav a):not(.tile):not(.ideacard) { transition: color var(--fc-t-fast) var(--fc-ease-sharp); } img { display: block; max-width: 100%; } /* ===================================================== Layout container ===================================================== */ .wrap { width: min(1320px, 100% - 48px); margin-inline: auto; } @media (max-width: 640px) { .wrap { width: min(100%, 100% - 32px); } } /* ===================================================== Top bar — sticky, thin, all-mono ===================================================== */ .topbar { position: sticky; top: 0; z-index: 50; background: rgba(0,0,0,0.92); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid rgba(255,255,255,0.12); } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; height: 88px; } .topbar__logo { display: inline-flex; align-items: center; gap: 16px; height: 56px; } .topbar__logo svg { height: 56px; width: auto; display: block; } .topbar__tag { font-family: var(--fc-font-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fc-accent); font-weight: 700; padding: 6px 12px; border: 1.5px solid var(--fc-accent); border-radius: 2px; display: none; } @media (min-width: 880px) { .topbar__tag { display: inline-block; } } .topbar__nav { display: none; align-items: center; gap: 4px; } @media (min-width: 980px) { .topbar__nav { display: flex; } } .topbar__nav a { font-family: var(--fc-font-mono); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.75); padding: 12px 14px; border-radius: 2px; cursor: pointer; position: relative; transition: color var(--fc-t-fast) var(--fc-ease-sharp), background var(--fc-t-fast) var(--fc-ease-sharp); } .topbar__nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--fc-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--fc-t-base) var(--fc-ease-sharp); } .topbar__nav a:hover { color: var(--fc-white); background: rgba(255,255,255,0.06); } .topbar__nav a:hover::after { transform: scaleX(1); } .topbar__nav a:active { transform: translateY(1px); } .topbar__nav a.is-current { color: var(--fc-white); background: rgba(255,255,255,0.08); } .topbar__nav a.is-current::after { transform: scaleX(1); background: var(--fc-accent); } .topbar__cta { display: inline-flex; align-items: center; gap: 8px; background: var(--fc-accent); color: var(--fc-accent-on); font-family: var(--fc-font-mono); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; padding: 14px 22px; border-radius: 2px; cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,0.4); transition: background var(--fc-t-fast) var(--fc-ease-sharp), transform var(--fc-t-instant) var(--fc-ease-sharp), box-shadow var(--fc-t-instant) var(--fc-ease-sharp); } .topbar__cta:hover { background: var(--fc-accent-hover); transform: translateY(-1px); box-shadow: 0 4px 0 rgba(0,0,0,0.5); } .topbar__cta:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,0.4); } /* Mobile menu trigger */ .topbar__burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: 1px solid rgba(255,255,255,0.2); border-radius: 2px; cursor: pointer; color: var(--fc-white); } @media (min-width: 980px) { .topbar__burger { display: none; } } .topbar__burger svg { width: 18px; height: 18px; } /* Mobile drawer */ .mnav { position: fixed; inset: 0; background: rgba(0,0,0,0.96); z-index: 60; display: none; flex-direction: column; padding: 24px; overflow-y: auto; } .mnav.is-open { display: flex; } .mnav__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; } .mnav__close { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.2); background: transparent; color: var(--fc-white); font-family: var(--fc-font-mono); font-size: 18px; cursor: pointer; } .mnav__list { display: flex; flex-direction: column; gap: 4px; } .mnav__list a { font-family: var(--fc-font-display); font-weight: 700; font-size: 32px; line-height: 1; letter-spacing: -0.01em; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.08); } .mnav__list a.is-current { color: var(--fc-accent); } .mnav__foot { margin-top: auto; padding-top: 32px; font-family: var(--fc-font-mono); font-size: 12px; color: rgba(255,255,255,0.6); } /* ===================================================== Hero patterns ===================================================== */ .hero { padding: 96px 0 56px; position: relative; } @media (max-width: 720px) { .hero { padding: 64px 0 32px; } } .hero__eyebrow { font-family: var(--fc-font-mono); font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fc-accent); font-weight: 700; display: inline-flex; align-items: center; gap: 14px; margin-bottom: 28px; } .hero__eyebrow::before { content: ""; width: 36px; height: 2px; background: var(--fc-accent); } .hero__title { font-family: var(--fc-font-display); font-weight: 700; font-size: clamp(44px, 7.5vw, 112px); line-height: 0.92; letter-spacing: -0.025em; text-wrap: balance; margin: 0 0 24px; max-width: 18ch; } .hero__title .pt { color: var(--fc-accent); } .hero__lede { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.45; color: rgba(255,255,255,0.82); max-width: 60ch; margin: 0 0 36px; font-weight: 400; } .hero__lede strong, .hero__lede b { color: var(--fc-white); font-weight: 600; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } /* Hero — homepage variant with the big soundwave */ .hero--home { padding: 88px 0 96px; overflow: hidden; } .hero__sw { display: flex; align-items: flex-end; gap: 4px; height: 96px; margin: 56px 0 0; width: 100%; max-width: 1120px; } .hero__sw i { display: block; flex: 1; min-width: 0; background: var(--fc-accent); border-radius: 0; min-height: 6px; height: 35%; animation: hsw 1400ms var(--fc-ease-sharp) infinite; animation-delay: calc(var(--i, 0) * 60ms); } @keyframes hsw { 0%, 100% { height: 18%; } 50% { height: 100%; } } /* Inline soundwave used as section divider */ .swrule { display: flex; align-items: flex-end; gap: 3px; height: 22px; margin: 0 0 20px; } .swrule i { width: 3px; background: var(--fc-accent); min-height: 4px; height: 50%; animation: hsw 1200ms var(--fc-ease-sharp) infinite; animation-delay: calc(var(--i, 0) * 70ms); } /* ===================================================== Buttons (page-level) ===================================================== */ .button { display: inline-flex; align-items: center; gap: 10px; background: var(--fc-accent); color: var(--fc-accent-on); font-family: var(--fc-font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; padding: 16px 24px; border-radius: 2px; border: 0; cursor: pointer; text-decoration: none; box-shadow: 0 2px 0 rgba(0,0,0,0.4); transition: background var(--fc-t-fast) var(--fc-ease-sharp), transform var(--fc-t-instant) var(--fc-ease-sharp), box-shadow var(--fc-t-instant) var(--fc-ease-sharp); } .button:hover { background: var(--fc-accent-hover); transform: translateY(-1px); box-shadow: 0 4px 0 rgba(0,0,0,0.5); } .button:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,0.3); } .button--ghost { background: transparent; color: var(--fc-white); border: 1px solid rgba(255,255,255,0.3); } .button--ghost:hover { background: rgba(255,255,255,0.05); border-color: var(--fc-white); } .button--orange { background: var(--fc-orange); color: var(--fc-white); } .button--orange:hover { background: #e84a13; } .button--white { background: var(--fc-white); color: var(--fc-black); } .button--white:hover { background: rgba(255,255,255,0.9); } .linklike { font-family: var(--fc-font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--fc-accent); border-bottom: 2px solid var(--fc-accent); padding-bottom: 4px; display: inline-block; cursor: pointer; transition: color var(--fc-t-fast) var(--fc-ease-sharp), border-color var(--fc-t-fast) var(--fc-ease-sharp), transform var(--fc-t-fast) var(--fc-ease-sharp); } .linklike:hover { color: var(--fc-white); border-color: var(--fc-white); transform: translateX(2px); } /* ===================================================== Eyebrow, section titles ===================================================== */ .eyebrow { font-family: var(--fc-font-mono); font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fc-accent); font-weight: 700; } .eyebrow--ghost { color: rgba(255,255,255,0.5); } .eyebrow--vol { color: var(--fc-volt); } .eyebrow--orange{ color: var(--fc-orange); } .section-title { font-family: var(--fc-font-display); font-weight: 700; font-size: clamp(36px, 5vw, 68px); line-height: 0.95; letter-spacing: -0.02em; margin: 0 0 16px; text-wrap: balance; } .section-lede { font-size: 22px; line-height: 1.5; font-weight: 400; color: rgba(255,255,255,0.82); max-width: 60ch; margin: 0 0 48px; } .section-lede strong, .section-lede b { color: var(--fc-white); font-weight: 600; } .section { padding: 96px 0; border-top: 1px solid rgba(255,255,255,0.08); } @media (max-width: 720px) { .section { padding: 64px 0; } } .section--flat { border-top: 0; } .hero + .section--flat { padding-top: 8px; } .section--electric { background: var(--fc-accent); color: var(--fc-white); border-top: 0; } .section--electric .eyebrow { color: var(--fc-bubblegum); } .section--electric .section-lede { color: rgba(255,255,255,0.85); } .section--volt { background: var(--fc-volt); color: var(--fc-black); border-top: 0; } .section--volt .eyebrow { color: var(--fc-black); } .section--volt .section-lede { color: rgba(0,0,0,0.75); } .section--fog { background: var(--fc-fog); color: var(--fc-black); border-top: 0; } .section--fog .section-lede { color: rgba(0,0,0,0.7); } .section--fog .eyebrow { color: var(--fc-accent); } /* ===================================================== Stat strip — used multiple places ===================================================== */ .statbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,0.14); border-bottom: 1px solid rgba(255,255,255,0.14); } @media (max-width: 720px) { .statbar { grid-template-columns: repeat(2, 1fr); } } .statbar__cell { padding: 32px 24px; border-right: 1px solid rgba(255,255,255,0.08); } .statbar__cell:last-child { border-right: 0; } @media (max-width: 720px) { .statbar__cell { border-bottom: 1px solid rgba(255,255,255,0.08); } .statbar__cell:nth-child(even) { border-right: 0; } .statbar__cell:nth-last-child(-n+2) { border-bottom: 0; } } .statbar__num { font-family: var(--fc-font-display); font-weight: 700; font-size: clamp(36px, 4vw, 56px); line-height: 1; color: var(--fc-volt); letter-spacing: -0.02em; } .statbar__num small { font-size: 0.55em; vertical-align: top; } .statbar__label { font-family: var(--fc-font-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); font-weight: 700; margin-top: 12px; display: block; } .section--fog .statbar__num { color: var(--fc-accent); } .section--fog .statbar__label { color: rgba(0,0,0,0.6); } .section--fog .statbar { border-color: rgba(0,0,0,0.14); } .section--fog .statbar__cell { border-color: rgba(0,0,0,0.08); } /* ===================================================== Tile grid (the 4 value-prop tiles, etc) ===================================================== */ .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 1080px) { .tiles { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .tiles { grid-template-columns: 1fr; } } .tiles--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 1080px) { .tiles--3 { grid-template-columns: 1fr; gap: 16px; } } .tile { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; border-radius: 2px; position: relative; overflow: hidden; transition: border-color var(--fc-t-fast) var(--fc-ease-sharp), transform var(--fc-t-fast) var(--fc-ease-sharp); } .tile:hover { border-color: var(--fc-accent); transform: translateY(-2px); } .tile__num { font-family: var(--fc-font-mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fc-accent); font-weight: 700; } .tile__title { font-family: var(--fc-font-display); font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: -0.01em; margin: 0; } .tile__body { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.78); margin: 0; } .tile__body strong, .tile__body b { color: var(--fc-white); font-weight: 600; } .tile--volt { background: var(--fc-volt); color: var(--fc-black); border-color: var(--fc-volt); } .tile--volt .tile__num, .tile--volt .tile__body { color: rgba(0,0,0,0.7); } .tile--volt .tile__num { color: var(--fc-black); } .tile--orange { background: var(--fc-orange); color: var(--fc-white); border-color: var(--fc-orange); } .tile--orange .tile__num { color: var(--fc-volt); } .tile--orange .tile__body { color: rgba(255,255,255,0.88); } .tile--electric { background: var(--fc-accent); color: var(--fc-white); border-color: var(--fc-accent); } .tile--electric .tile__num { color: var(--fc-bubblegum); } .tile--electric .tile__body { color: rgba(255,255,255,0.85); } .tile--bubblegum { background: var(--fc-bubblegum); color: var(--fc-black); border-color: var(--fc-bubblegum); } .tile--bubblegum .tile__num { color: var(--fc-accent); } .tile--bubblegum .tile__body { color: rgba(0,0,0,0.75); } /* ===================================================== Two-column split (image / text) ===================================================== */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } @media (max-width: 980px) { .split { grid-template-columns: 1fr; gap: 40px; } } .split--narrow { grid-template-columns: 1.1fr 0.9fr; gap: 64px; } @media (max-width: 980px) { .split--narrow { grid-template-columns: 1fr; gap: 32px; } } /* Image plate — used for terrace photo accents on inner pages */ .plate { position: relative; aspect-ratio: 4 / 5; background: var(--fc-graphite); overflow: hidden; border: 1px solid rgba(255,255,255,0.08); } .plate img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(0.92); } .plate__cap { position: absolute; bottom: 14px; left: 18px; font-family: var(--fc-font-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--fc-volt); background: rgba(0,0,0,0.75); padding: 6px 10px; border-radius: 2px; } .plate--16x9 { aspect-ratio: 16 / 9; } .plate--square { aspect-ratio: 1; } .plate--landscape { aspect-ratio: 3 / 2; } /* Generic placeholder image — used until Lalit drops in real photos */ .plate--ph { background: linear-gradient(135deg, rgba(80,0,255,0.18), rgba(255,90,31,0.18) 60%, rgba(230,255,26,0.18)), repeating-linear-gradient( 90deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 7px ), var(--fc-graphite); display: flex; align-items: center; justify-content: center; } .plate--ph::after { content: attr(data-label); font-family: var(--fc-font-mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.45); } /* ===================================================== Long text content (use / rights / about body) ===================================================== */ .prose { max-width: 60ch; font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.85); } .prose p { margin: 0 0 1em; } .prose h2 { font-family: var(--fc-font-display); font-weight: 700; font-size: clamp(28px, 3vw, 40px); line-height: 1; letter-spacing: -0.015em; color: var(--fc-white); margin: 64px 0 16px; } .prose h3 { font-family: var(--fc-font-display); font-weight: 700; font-size: 22px; line-height: 1.15; color: var(--fc-white); margin: 32px 0 8px; } .prose ul { padding-left: 1.2em; margin: 0 0 1em; } .prose li { margin: 0 0 0.4em; } .prose strong { color: var(--fc-white); font-weight: 600; } .section--fog .prose { color: rgba(0,0,0,0.78); } .section--fog .prose h2, .section--fog .prose h3, .section--fog .prose strong { color: var(--fc-black); } /* ===================================================== Pricing tier cards ===================================================== */ .tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 1080px) { .tiers { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .tiers { grid-template-columns: 1fr; } } .tier { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 36px 28px; display: flex; flex-direction: column; gap: 18px; border-radius: 2px; } .tier__rank { font-family: var(--fc-font-mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fc-accent); font-weight: 700; } .tier__name { font-family: var(--fc-font-display); font-weight: 700; font-size: 28px; line-height: 1; margin: 0; } .tier__price { font-family: var(--fc-font-display); font-weight: 700; font-size: 40px; line-height: 1; color: var(--fc-volt); letter-spacing: -0.02em; } .tier__use { font-family: var(--fc-font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.7); border-top: 1px solid rgba(255,255,255,0.14); padding-top: 16px; line-height: 1.5; } .tier__detail { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.82); margin: 0; } .tier__detail strong, .tier__detail b { color: var(--fc-white); font-weight: 600; } .tier--feature { background: var(--fc-accent); border-color: var(--fc-accent); } .tier--feature .tier__rank { color: var(--fc-bubblegum); } .tier--feature .tier__price { color: var(--fc-volt); } .tier--feature .tier__use { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.25); } .tier--feature .tier__detail { color: rgba(255,255,255,0.92); } /* ===================================================== Logo wall (Trusted-by) ===================================================== */ .logowall { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid rgba(255,255,255,0.1); } @media (max-width: 980px) { .logowall { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 540px) { .logowall { grid-template-columns: repeat(2, 1fr); } } .logowall__cell { aspect-ratio: 5 / 2; display: flex; align-items: center; justify-content: center; border-right: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); font-family: var(--fc-font-display); font-weight: 700; font-size: 22px; color: rgba(255,255,255,0.75); letter-spacing: -0.01em; text-align: center; padding: 12px 16px; transition: color var(--fc-t-fast) var(--fc-ease-sharp), background var(--fc-t-fast) var(--fc-ease-sharp); } .logowall__cell:hover { color: var(--fc-white); background: rgba(255,255,255,0.04); } .logowall__cell--mono { font-family: var(--fc-font-mono); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; } /* Categorised list (Brands / Broadcasters / Football) */ .cat-block { margin-bottom: 32px; } .cat-block__label { font-family: var(--fc-font-mono); font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fc-accent); font-weight: 700; margin-bottom: 14px; display: inline-flex; align-items: center; gap: 12px; } .cat-block__label::before { content: ""; width: 32px; height: 2px; background: currentColor; display: block; } .cat-block__list { font-family: var(--fc-font-display); font-weight: 700; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.05; letter-spacing: -0.015em; color: rgba(255,255,255,0.92); } .cat-block__list .dot { color: var(--fc-accent); margin: 0 8px; } /* ===================================================== Press wall — display-size pull quotes ===================================================== */ .presswall { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 24px; border-top: 1px solid rgba(0,0,0,0.14); border-left: 1px solid rgba(0,0,0,0.14); } @media (max-width: 880px) { .presswall { grid-template-columns: 1fr; } } .presswall__item { margin: 0; padding: 48px 40px; border-right: 1px solid rgba(0,0,0,0.14); border-bottom: 1px solid rgba(0,0,0,0.14); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 280px; transition: background var(--fc-t-base) var(--fc-ease-sharp); } .presswall__item:hover { background: rgba(80, 0, 255, 0.04); } @media (max-width: 720px) { .presswall__item { padding: 32px 24px; min-height: 220px; } } .presswall__quote { font-family: var(--fc-font-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 48px); line-height: 1; letter-spacing: -0.02em; margin: 0; text-wrap: balance; color: var(--fc-black); } .presswall__source { font-family: var(--fc-font-mono); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--fc-accent); } /* Press wall on dark sections */ .section--electric .presswall, .section:not(.section--fog):not(.section--volt) .presswall { border-color: rgba(255,255,255,0.14); } .section--electric .presswall__item, .section:not(.section--fog):not(.section--volt) .presswall__item { border-color: rgba(255,255,255,0.14); } .section--electric .presswall__quote { color: var(--fc-white); } .section--electric .presswall__source { color: var(--fc-bubblegum); } /* ===================================================== YouTube lite embed — thumbnail + play button, swaps to iframe on click ===================================================== */ .ytlite { position: relative; aspect-ratio: 16 / 9; background: var(--fc-black); border: 1px solid rgba(255,255,255,0.08); overflow: hidden; cursor: pointer; display: block; } .ytlite__thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--fc-t-base) var(--fc-ease-sharp), filter var(--fc-t-base) var(--fc-ease-sharp); } .ytlite:hover .ytlite__thumb { transform: scale(1.03); filter: brightness(0.7); } .ytlite__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .ytlite__play svg { width: 88px; height: 88px; filter: drop-shadow(0 6px 20px rgba(0,0,0,0.6)); transition: transform var(--fc-t-base) var(--fc-ease-sharp); } .ytlite:hover .ytlite__play svg { transform: scale(1.08); } .ytlite__cap { position: absolute; bottom: 16px; left: 20px; font-family: var(--fc-font-mono); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--fc-volt); background: rgba(0,0,0,0.8); padding: 8px 12px; border-radius: 2px; } .ytlite iframe { width: 100%; height: 100%; border: 0; display: block; } .presslist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 24px; } @media (max-width: 880px) { .presslist { grid-template-columns: 1fr; } } .presslist__item { background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.12); padding: 36px 36px 28px; display: flex; flex-direction: column; gap: 20px; border-radius: 2px; text-decoration: none; color: inherit; cursor: pointer; position: relative; transition: border-color var(--fc-t-fast) var(--fc-ease-sharp), transform var(--fc-t-fast) var(--fc-ease-sharp), background var(--fc-t-fast) var(--fc-ease-sharp); } .presslist__item:hover { background: var(--fc-white); border-color: var(--fc-accent); transform: translateY(-2px); } .presslist__item--feature { grid-column: 1 / -1; background: var(--fc-black); color: var(--fc-white); border-color: var(--fc-black); padding: 56px 56px 48px; display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 48px; align-items: end; } @media (max-width: 880px) { .presslist__item--feature { grid-template-columns: 1fr; padding: 36px 32px; gap: 24px; } } .presslist__item--feature:hover { background: var(--fc-graphite); border-color: var(--fc-volt); } .presslist__source { font-family: var(--fc-font-mono); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--fc-accent); display: flex; align-items: center; gap: 12px; } .presslist__source::before { content: ""; width: 24px; height: 2px; background: currentColor; } .presslist__item--feature .presslist__source { color: var(--fc-volt); } .presslist__pull { font-family: var(--fc-font-display); font-weight: 700; font-size: clamp(28px, 3vw, 44px); line-height: 1; letter-spacing: -0.018em; margin: 0; color: var(--fc-black); text-wrap: balance; } .presslist__item--feature .presslist__pull { color: var(--fc-white); font-size: clamp(36px, 4vw, 64px); } .presslist__headline { font-family: var(--fc-font-body); font-weight: 500; font-size: 17px; line-height: 1.5; color: rgba(0,0,0,0.75); margin: 0; } .presslist__item--feature .presslist__headline { color: rgba(255,255,255,0.82); font-size: 19px; } .presslist__cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fc-font-mono); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--fc-accent); margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.12); } .presslist__cta::after { content: "↗"; transition: transform var(--fc-t-fast) var(--fc-ease-sharp); } .presslist__item:hover .presslist__cta::after { transform: translate(2px, -2px); } .presslist__item--feature .presslist__cta { color: var(--fc-volt); border-color: rgba(255,255,255,0.15); } /* ===================================================== Testimonial hero — quote card on a terrace-photo bg ===================================================== */ .testimonial { position: relative; background: var(--fc-graphite); overflow: hidden; padding: 0; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); } .testimonial__bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(0.7) brightness(0.5) contrast(1.1); z-index: 0; } .testimonial__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.7) 100%); } .testimonial__wrap { position: relative; z-index: 1; padding: 112px 0; } @media (max-width: 720px) { .testimonial__wrap { padding: 72px 0; } } .testimonial__card { position: relative; max-width: 920px; background: rgba(8, 10, 32, 0.86); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); border: 1px solid rgba(255,255,255,0.10); padding: 48px 56px; border-radius: 2px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), 0 8px 24px -8px rgba(0,0,0,0.4); } @media (max-width: 720px) { .testimonial__card { padding: 32px 28px; } } .testimonial__card::after { /* The downward speech-bubble pointer */ content: ""; position: absolute; bottom: -22px; right: 64px; width: 0; height: 0; border-left: 22px solid transparent; border-right: 22px solid transparent; border-top: 22px solid rgba(8, 10, 32, 0.86); filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); } .testimonial__eyebrow { font-family: var(--fc-font-mono); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fc-volt); font-weight: 700; margin-bottom: 24px; display: inline-block; } .testimonial__quote { font-family: var(--fc-font-body); font-weight: 400; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.42; margin: 0; color: var(--fc-white); text-wrap: balance; } .testimonial__quote strong { font-weight: 600; color: var(--fc-white); } .testimonial__attrib { margin-top: 56px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 24px 40px; padding-right: 16px; } @media (max-width: 720px) { .testimonial__attrib { margin-top: 40px; justify-content: flex-start; padding-right: 0; } } .testimonial__who { text-align: right; display: flex; flex-direction: column; gap: 4px; } @media (max-width: 720px) { .testimonial__who { text-align: left; } } .testimonial__name { font-family: var(--fc-font-display); font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: -0.01em; color: var(--fc-white); } .testimonial__role { font-family: var(--fc-font-mono); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fc-volt); font-weight: 700; } .testimonial__brand { font-family: var(--fc-font-display); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -0.01em; color: var(--fc-white); padding-left: 32px; border-left: 1px solid rgba(255,255,255,0.2); min-width: 160px; } @media (max-width: 720px) { .testimonial__brand { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 16px; min-width: 0; } } .testimonial__brand .sub { display: block; font-family: var(--fc-font-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.65); font-weight: 700; margin-top: 8px; } /* ===================================================== Use-case row (TV & Film / Advertising / Digital page) ===================================================== */ .usecase-list { display: flex; flex-direction: column; } .usecase { display: grid; grid-template-columns: 56px 140px 1fr 1fr; gap: 24px; padding: 36px 0; border-top: 1px solid rgba(255,255,255,0.1); align-items: start; } .usecase:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); } .usecase--noicon { grid-template-columns: 140px 1fr 1fr; } @media (max-width: 720px) { .usecase { grid-template-columns: 56px 1fr; gap: 16px; padding: 28px 0; } .usecase--noicon { grid-template-columns: 1fr; } .usecase > p { grid-column: 1 / -1; } } .usecase__icon { font-size: 40px; line-height: 1; color: var(--fc-accent); display: inline-flex; align-items: flex-start; padding-top: 2px; } .usecase__icon i { display: block; } .usecase__num { font-family: var(--fc-font-mono); font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fc-accent); font-weight: 700; padding-top: 10px; } .usecase__title { font-family: var(--fc-font-display); font-weight: 700; font-size: clamp(26px, 2.6vw, 38px); line-height: 1; letter-spacing: -0.015em; margin: 0; } .usecase__body { font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.75); margin: 0; } /* ===================================================== Quote form ===================================================== */ .form { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; } @media (max-width: 720px) { .form { grid-template-columns: 1fr; gap: 24px; } } .form-status { border: 1px solid rgba(255,255,255,0.18); border-left: 6px solid var(--fc-accent); background: rgba(255,255,255,0.06); color: var(--fc-white); padding: 24px 28px; margin-bottom: 32px; scroll-margin-top: 120px; } .form-status h2 { font-family: var(--fc-font-display); font-size: 32px; line-height: 1; margin: 0 0 10px; letter-spacing: 0; } .form-status p { font-size: 18px; line-height: 1.5; color: rgba(255,255,255,0.78); margin: 0; } .form-status--success { border-left-color: var(--fc-volt); background: rgba(230,255,26,0.08); } .form-status--error { border-left-color: var(--fc-orange); background: rgba(255,90,31,0.08); } @media (max-width: 540px) { .form-status { padding: 20px; } .form-status h2 { font-size: 26px; } .form-status p { font-size: 16px; } } .form__row { display: flex; flex-direction: column; gap: 10px; } .form__row--full { grid-column: 1 / -1; } .form__label { font-family: var(--fc-font-mono); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fc-white); font-weight: 700; } .form__label .req { color: var(--fc-orange); margin-left: 4px; } .form__input, .form__select, .form__textarea { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.18); border-radius: 2px; padding: 18px 18px; color: var(--fc-white); font-family: var(--fc-font-body); font-size: 18px; line-height: 1.4; width: 100%; transition: border-color var(--fc-t-fast) var(--fc-ease-sharp), background var(--fc-t-fast) var(--fc-ease-sharp); } .form__input::placeholder, .form__textarea::placeholder { color: rgba(255,255,255,0.35); } .form__input:focus, .form__select:focus, .form__textarea:focus { outline: none; border-color: var(--fc-accent); background: rgba(255,255,255,0.07); box-shadow: 0 0 0 3px rgba(80,0,255,0.18); } .form__textarea { min-height: 180px; resize: vertical; font-family: var(--fc-font-body); } .form__select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.5) 50%), linear-gradient(135deg, rgba(255,255,255,0.5) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; } .form__hint { font-family: var(--fc-font-body); font-size: 14px; line-height: 1.45; color: rgba(255,255,255,0.6); margin-top: 4px; } .form__checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; margin-top: 4px; } @media (max-width: 540px) { .form__checks { grid-template-columns: 1fr; } } .form__check { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; color: rgba(255,255,255,0.92); cursor: pointer; padding: 4px 0; } .form__check input { width: 20px; height: 20px; accent-color: var(--fc-accent); } .form__submit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); margin-top: 8px; } .form__note { font-family: var(--fc-font-body); font-size: 14px; line-height: 1.45; color: rgba(255,255,255,0.6); max-width: 50ch; } /* ===================================================== Catalogue landing — big card with cover preview ===================================================== */ .cat-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; } @media (max-width: 980px) { .cat-hero { grid-template-columns: 1fr; gap: 40px; } } .cat-cover { aspect-ratio: 297 / 210; /* A4 landscape proportion */ background: var(--fc-black); border: 1px solid rgba(255,255,255,0.14); position: relative; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(80,0,255,0.4), 0 8px 24px -8px rgba(0,0,0,0.6); transform: rotate(-1.2deg); transition: transform var(--fc-t-base) var(--fc-ease-sharp); } .cat-cover:hover { transform: rotate(0deg) scale(1.02); } .cat-cover__inner { padding: 9% 7%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .cat-cover__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .cat-cover__logo { width: 38%; height: auto; } .cat-cover__edition { font-family: var(--fc-font-mono); font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fc-white); font-weight: 700; text-align: right; } .cat-cover__edition span { color: var(--fc-accent); display: block; margin-top: 2px; } .cat-cover__title { font-family: var(--fc-font-display); font-weight: 700; font-size: clamp(22px, 3.4vw, 56px); line-height: 0.95; letter-spacing: -0.02em; color: var(--fc-white); text-wrap: balance; } .cat-cover__title .pt { color: var(--fc-accent); } .cat-cover__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; } .cat-cover__tag { font-family: var(--fc-font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); font-weight: 700; } .cat-cover__sw { display: flex; gap: 2px; align-items: flex-end; height: 28px; width: 44%; } .cat-cover__sw i { flex: 1; background: var(--fc-accent); min-height: 4px; height: var(--h, 60%); } .cat-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; border-top: 1px solid rgba(255,255,255,0.14); border-bottom: 1px solid rgba(255,255,255,0.14); padding: 24px 0; margin: 32px 0; } .cat-meta__num { font-family: var(--fc-font-display); font-weight: 700; font-size: clamp(24px, 2.6vw, 36px); line-height: 1; color: var(--fc-volt); } .cat-meta__label { font-family: var(--fc-font-mono); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.75); font-weight: 700; margin-top: 10px; } .cat-inside { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; } @media (max-width: 720px) { .cat-inside { grid-template-columns: repeat(2, 1fr); } } .cat-inside__page { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); aspect-ratio: 297 / 210; padding: 16px; font-family: var(--fc-font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.65); font-weight: 700; display: flex; flex-direction: column; justify-content: space-between; position: relative; } .cat-inside__page::before { content: ""; position: absolute; left: 14px; right: 14px; top: 60%; height: 2px; background: rgba(255,255,255,0.06); box-shadow: 0 8px 0 rgba(255,255,255,0.06), 0 16px 0 rgba(255,255,255,0.06); } .cat-inside__num { color: var(--fc-accent); } .cat-inside__title { color: var(--fc-white); font-family: var(--fc-font-display); font-size: 18px; line-height: 1; letter-spacing: -0.01em; text-transform: none; } /* ===================================================== CTA strip (the licensing call-to-action footer block) ===================================================== */ .ctastrip { background: var(--fc-volt); color: var(--fc-black); padding: 80px 0; position: relative; overflow: hidden; } .ctastrip__inner { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 64px; align-items: center; } @media (max-width: 880px) { .ctastrip__inner { grid-template-columns: 1fr; gap: 24px; } } .ctastrip__title { font-family: var(--fc-font-display); font-weight: 700; font-size: clamp(36px, 5vw, 72px); line-height: 0.95; letter-spacing: -0.02em; margin: 0 0 12px; text-wrap: balance; color: var(--fc-black); } .ctastrip__lede { color: rgba(0,0,0,0.7); font-size: 18px; line-height: 1.45; margin: 0; } .ctastrip__ctas { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } @media (max-width: 880px) { .ctastrip__ctas { flex-direction: row; flex-wrap: wrap; } } .ctastrip .button { background: var(--fc-accent); color: var(--fc-white); } .ctastrip .button:hover { background: var(--fc-accent-hover); } .ctastrip .button--ghost { background: transparent; color: var(--fc-black); border-color: rgba(0,0,0,0.4); } .ctastrip .button--ghost:hover { background: rgba(0,0,0,0.06); border-color: var(--fc-black); } /* ===================================================== Footer ===================================================== */ .foot { background: var(--fc-graphite); color: rgba(255,255,255,0.7); padding: 64px 0 32px; border-top: 1px solid rgba(255,255,255,0.05); } .foot__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; } @media (max-width: 880px) { .foot__top { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 540px) { .foot__top { grid-template-columns: 1fr; } } .foot__brand { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; } .foot__brand svg { height: 88px; width: auto; } .foot__tag { font-family: var(--fc-font-mono); font-size: 14px; letter-spacing: 0.06em; color: rgba(255,255,255,0.65); max-width: 36ch; line-height: 1.55; } .foot__col h4 { font-family: var(--fc-font-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fc-accent); margin: 0 0 16px; font-weight: 700; } .foot__col a, .foot__col span { display: block; padding: 6px 0; color: rgba(255,255,255,0.78); font-size: 16px; cursor: pointer; transition: color var(--fc-t-fast) var(--fc-ease-sharp), padding var(--fc-t-fast) var(--fc-ease-sharp); } .foot__col a:hover { color: var(--fc-white); padding-left: 6px; } .foot__bottom { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; font-family: var(--fc-font-mono); font-size: 13px; letter-spacing: 0.06em; color: rgba(255,255,255,0.55); padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.06); } .foot__bottom a { color: rgba(255,255,255,0.6); } .foot__bottom a:hover { color: var(--fc-white); } /* ===================================================== Tweaks panel — accent colour switcher ===================================================== */ .tweaks { position: fixed; right: 16px; bottom: 16px; z-index: 80; background: rgba(20,20,20,0.92); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.12); border-radius: 2px; padding: 12px; display: none; flex-direction: column; gap: 8px; font-family: var(--fc-font-mono); box-shadow: 0 12px 40px rgba(0,0,0,0.5); } body[data-tweaks="on"] .tweaks { display: flex; } .tweaks__title { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 4px; } .tweaks__swatches { display: flex; gap: 6px; } .tweaks__sw { width: 32px; height: 32px; border: 2px solid transparent; cursor: pointer; background: var(--c, #000); border-radius: 2px; position: relative; } .tweaks__sw[aria-pressed="true"] { border-color: var(--fc-white); } .tweaks__sw[aria-pressed="true"]::after { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(255,255,255,0.4); } /* ===================================================== Helpers ===================================================== */ .text-accent { color: var(--fc-accent); } .text-volt { color: var(--fc-volt); } .text-orange { color: var(--fc-orange); } .text-white { color: var(--fc-white); } .text-mono { font-family: var(--fc-font-mono); font-size: 14px; letter-spacing: 0.04em; } .divider { height: 1px; background: rgba(255,255,255,0.08); border: 0; margin: 48px 0; } .mt-md { margin-top: 24px; } .mt-lg { margin-top: 48px; } /* ===================================================== Reveal animation ===================================================== */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--fc-ease-sharp), transform 600ms var(--fc-ease-sharp); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .cat-cover { transform: none; } .hero__sw i, .swrule i, .sw__bar { animation: none !important; height: 40%; } } /* ===================================================== Idea cards — the 3-up grid for the Eleven Ideas page ===================================================== */ .ideacards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,0.1); border-left: 1px solid rgba(255,255,255,0.1); } @media (max-width: 1000px) { .ideacards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .ideacards { grid-template-columns: 1fr; } } .ideacard { padding: 36px 32px 32px; border-right: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 18px; min-height: 320px; transition: background var(--fc-t-base) var(--fc-ease-sharp); } .ideacard:hover { background: rgba(80, 0, 255, 0.05); } .ideacard__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .ideacard__num { font-family: var(--fc-font-mono); font-size: 14px; letter-spacing: 0.18em; font-weight: 700; color: var(--fc-volt); } .ideacard__icon { font-size: 28px; line-height: 1; color: var(--fc-accent); } .ideacard__title { font-family: var(--fc-font-display); font-weight: 700; font-size: clamp(24px, 1.7vw, 30px); line-height: 1; letter-spacing: -0.018em; margin: 0; text-wrap: balance; } .ideacard__title .pt { color: var(--fc-accent); } .ideacard__body { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,0.78); margin: 0; } .ideacard__fit { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.1); font-family: var(--fc-font-mono); font-size: 12px; line-height: 1.5; letter-spacing: 0.04em; color: rgba(255,255,255,0.55); } .ideacard__fit strong { color: var(--fc-volt); font-weight: 700; letter-spacing: 0.08em; margin-right: 6px; }