/* ========================================================= PRO INTAGE™ — Colour grades (switch via ) noir · blockbuster · tungsten · aurora · neon ========================================================= */ :root{--glow:#161a20;--deep:#040506;--on-accent:#fff} /* 02 · Blockbuster — Hollywood teal & orange grade */ :root[data-grade="blockbuster"]{ --ink:#031012;--ink-2:#061719;--ink-3:#0b2226;--deep:#010809;--glow:#0f3236; --steel:#6f9091;--silver:#b8d0cd;--paper:#f6eee4; --rec:#ff7a1f;--on-accent:#1a0900;--line:rgba(190,240,235,.11);--line-2:rgba(190,240,235,.22)} /* 03 · Tungsten — warm black & gold, premium Dubai */ :root[data-grade="tungsten"]{ --ink:#0a0806;--ink-2:#110d09;--ink-3:#1a140e;--deep:#050403;--glow:#2b2013; --steel:#94866f;--silver:#d6c9b3;--paper:#f6eee0; --rec:#e2aa4d;--on-accent:#140d02;--line:rgba(255,230,190,.11);--line-2:rgba(255,230,190,.22)} /* 04 · Aurora — arctic night & aurora green */ :root[data-grade="aurora"]{ --ink:#040a0b;--ink-2:#071214;--ink-3:#0d1b1d;--deep:#020606;--glow:#0f2b27; --steel:#73908c;--silver:#bdd6d1;--paper:#eaf6f3; --rec:#4dffa3;--on-accent:#02140a;--line:rgba(200,255,235,.1);--line-2:rgba(200,255,235,.2)} /* 05 · Neon — midnight violet & magenta, sci-fi noir */ :root[data-grade="neon"]{ --ink:#08061a;--ink-2:#0e0a25;--ink-3:#161133;--deep:#040310;--glow:#221858; --steel:#8b85b3;--silver:#d0cbeb;--paper:#f3f0ff; --rec:#ff2e97;--on-accent:#fff;--line:rgba(220,210,255,.11);--line-2:rgba(220,210,255,.22)} /* ---- Token hookups for colours that were hard-coded in v1 ---- */ html,body,section{transition:background-color .6s ease} .hero{background:radial-gradient(90% 70% at 50% 38%,var(--glow) 0%,var(--ink) 60%,var(--deep) 100%)} .hud{background:linear-gradient(color-mix(in srgb,var(--ink) 72%,transparent),transparent)} .menu{background:color-mix(in srgb,var(--ink) 96%,transparent)} .work,.clients,.pipeline{background:var(--ink)} .reel__play:hover{background:var(--rec);color:var(--on-accent)} .caps{background:var(--ink-2)} .caps__strip{background:var(--deep)} .cap{background:var(--ink-3)} .cap__media::after{background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--ink) 78%,transparent))} .vfx{background:radial-gradient(80% 60% at 70% 50%,var(--glow),var(--ink) 70%)} .vfx__tag{background:color-mix(in srgb,var(--ink) 75%,transparent)} .vfx__track{border-color:var(--rec)} .timeline{background:var(--deep)} .track__id{background:var(--ink-2)} .clip{background:linear-gradient(180deg,var(--ink-3),var(--ink-2))} .clip.is-live{background:linear-gradient(180deg,color-mix(in srgb,var(--ink-3),var(--paper) 9%),var(--ink-3))} .wave i{background:color-mix(in srgb,var(--rec) 55%,transparent)} .world__bg::after{background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 92%,transparent) 20%,color-mix(in srgb,var(--ink) 20%,transparent) 70%,color-mix(in srgb,var(--ink) 50%,transparent)),linear-gradient(var(--ink),transparent 18%,transparent 82%,var(--ink))} .world__bg video{mix-blend-mode:luminosity} :root:not([data-grade]) .world__bg video,:root[data-grade="noir"] .world__bg video{mix-blend-mode:normal} .crew{background:var(--deep)} .crew__pin::before{background:linear-gradient(var(--deep) 40%,transparent)} .crew__pin::after{background:linear-gradient(transparent,var(--deep) 60%)} .contact{background:radial-gradient(70% 60% at 80% 20%,var(--glow),var(--ink) 70%)} .contact__cta:hover,.contact__cta:hover .contact__cta-label{color:var(--on-accent)} .slate__board{background:var(--ink-2)} .modal{background:color-mix(in srgb,var(--deep) 95%,transparent)} .credit:hover{color:var(--ink)} ::selection{color:var(--on-accent)} /* ---- Grade switcher (film "LUT" picker) ---- */ .grade{position:fixed;left:50%;bottom:44px;z-index:850;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 14px 8px 16px;border:1px solid var(--line-2);border-radius:40px;background:color-mix(in srgb,var(--ink) 70%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} .grade__label{color:var(--steel);font-size:9.5px} .grade__sw{position:relative;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--b) 0 50%,var(--a) 50% 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);transition:transform .4s var(--ease)} .grade__sw:hover{transform:scale(1.15)} .grade__sw[aria-checked="true"]{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 0 0 2px var(--ink),0 0 0 3px var(--paper)} .grade__name{min-width:12ch;color:var(--paper);font-size:9.5px} @media (max-width:760px){.grade{bottom:14px;padding:6px 10px;gap:8px}.grade__label{display:none}.grade__name{min-width:0}}