/* ========================================================================== TWP — Temporary Works Portal · custom styling & animations (Tailwind handles layout/utility; this file owns the premium polish) ========================================================================== */ :root { --ink: #050807; --panel: #0c1110; --panel-2: #0f1715; /* Figma palette */ --brand: #00ff94; /* primary */ --brand-bright: #6affc0; /* gradient highlight */ --brand-deep: #00b86a; /* gradient base / logo */ --gray: #f3f4f4; /* near-white light text */ --txt-dim: #bfc9bf; /* body / muted text */ --outline: #bfc8c6; /* outline gray */ --salmon: #ffa29d; /* negative / error */ --line: #FFFFFF1A; --line-strong: rgba(191, 200, 198, 0.2); } html { scroll-behavior: smooth; scroll-padding-top: 90px; } body { background-color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ----- Typography -------------------------------------------------------- Body / normal text uses Inter (set on via Tailwind font-sans). Headings & sub-headings use Montserrat. The .eyebrow + .field-label rules below are the small uppercase sub-headings above section titles / inputs. */ h1, h2, h3, h4, h5, h6, .font-heading, .field-label { font-family: "Montserrat", "Inter", ui-sans-serif, system-ui, sans-serif; } .eyebrow{ font-family: "Inter", ui-sans-serif, system-ui, sans-serif; } /* ----- Ambient background glow ------------------------------------------- */ .bg-aura { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .bg-aura::before, .bg-aura::after { content: ""; position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.5; } .bg-aura::before { width: 700px; height: 700px; top: -340px; left: -160px; background: radial-gradient(circle, rgba(0, 255, 148, 0.22), transparent 70%); } .bg-aura::after { width: 560px; height: 560px; top: 8%; right: -220px; background: radial-gradient(circle, rgba(0, 255, 148, 0.12), transparent 70%); } /* Subtle grid texture overlaid on the very top of the page */ .grid-veil { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 35%, transparent 80%); mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 35%, transparent 80%); pointer-events: none; } /* ----- Brand wordmark ----------------------------------------------------- */ .brand-text { background: linear-gradient(135deg, #8dffce 0%, #00ff94 45%, #00b86a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.03em; } /* ----- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 700; letter-spacing: 0.02em; border-radius: 8px; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease; will-change: transform; } .btn-primary { background: linear-gradient(180deg, var(--brand-bright), var(--brand)); color: #000000; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -10px rgba(0, 255, 148, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .btn-primary:active { transform: translateY(0); } .btn-ghost { background: rgba(255, 255, 255, 0.02); color: var(--gray); border: 1px solid var(--line-strong); } .btn-ghost:hover { transform: translateY(-2px); border-color: rgba(0, 255, 148, 0.6); background: rgba(0, 255, 148, 0.06); } /* ----- Cards -------------------------------------------------------------- */ .card { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)); background-color: var(--panel); border: 1px solid var(--line); border-radius: 1rem; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease; } .card:hover { transform: translateY(-6px); border-color: rgba(0, 255, 148, 0.4); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 255, 148, 0.12); } /* highlighted (brand) card */ .card-brand { /* background: linear-gradient(180deg, rgba(0, 255, 148, 0.12), rgba(0, 255, 148, 0.02)); */ border-color: rgba(0, 255, 148, 0.45); } .card-brand:hover { border-color: rgba(0, 255, 148, 0.7); box-shadow: 0 24px 50px -20px rgba(0, 255, 148, 0.35); } /* static card panel — keeps the card look without the hover lift/glow (used for the large How-it-works showcase container). */ .card.no-lift:hover { transform: none; box-shadow: none; border-color: var(--line); } /* ----- How-it-works showcase swap --------------------------------------- The detail panel below the step tabs cross-fades when a new step is selected. JS toggles .is-swapping for the brief fade-out. */ .showcase-swap { transition: opacity 0.3s ease, transform 0.3s ease; } .showcase-swap.is-swapping { opacity: 0; transform: translateY(8px); } /* step card acts as a tab */ .step-card { cursor: pointer; text-align: left; border-radius: 8px; } .step-card:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); } /* ----- Compliance grid column dividers ----------------------------------- Thin vertical rules between columns (per the design). The border sits on the left edge of each cell and is removed for the first cell of each row, so the divider count adapts to the responsive column count. */ .compliance-item { border-left: 1px solid rgba(255, 255, 255, 0.1); } .compliance-item:nth-child(n) { border-left: none; } @media (min-width: 640px) and (max-width: 1023.98px) { .compliance-item:nth-child(2n) { border-left: 1px solid rgba(255, 255, 255, 0.1); } } @media (min-width: 1024px) { .compliance-item:not(:nth-child(3n + 1)) { border-left: 1px solid rgba(255, 255, 255, 0.1); } } /* ----- Section eyebrow label --------------------------------------------- */ .eyebrow { display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brand); } /* ----- Icon chips --------------------------------------------------------- */ .icon-chip { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #004D2C; border-radius: 2px; } /* check / cross list rows */ .tick { flex: none; width: 1.35rem; height: 1.35rem; margin-top: 0.1rem; } /* Keep inline list icons (checklists, capability/benefit rows) from being squashed by flexbox when the adjacent text wraps to multiple lines. */ li.flex > svg { flex: none; } /* nudge top-aligned rows so the icon lines up with the first text line (centered rows keep their natural vertical centering). */ li.flex:not(.items-center) > svg { margin-top: 0.15rem; } /* pill tags */ .pill { border: 1px solid #00E38333; background: #00E3830D; color: #00E383; border-radius: 12px; padding: 8px 24px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; } .pill:hover { background: var(--brand); color: #04130a; transform: translateY(-2px); } /* ----- Header scroll state ----------------------------------------------- */ .site-header { transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease; border-bottom: 1px solid transparent; } .site-header.is-scrolled { background: rgba(6, 9, 8, 0.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--line); } /* nav link underline */ .nav-link { position: relative; transition: color 0.25s ease; } .nav-link::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: var(--brand); border-radius: 2px; transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .nav-link:hover { color: #fff; } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-link.active { color: #00FF94; } /* ----- Dashboard mockup glow & float ------------------------------------- */ .mockup { animation: float 7s ease-in-out infinite; box-shadow: 0px 10px 64px 0px #00FF9440; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* ----- CTA banner --------------------------------------------------------- */ .cta-banner { background: linear-gradient(180deg, rgba(5, 8, 7, 0.78), rgba(5, 8, 7, 0.92)), url("./assets/Construction\ Backdrop.png"); background-size: cover; background-position: center; } /* ----- Scroll reveal ------------------------------------------------------ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.in-view { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: 0.08s; } .reveal[data-delay="2"] { transition-delay: 0.16s; } .reveal[data-delay="3"] { transition-delay: 0.24s; } .reveal[data-delay="4"] { transition-delay: 0.32s; } .reveal[data-delay="5"] { transition-delay: 0.4s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .mockup { animation: none; } } /* ----- Custom scrollbar --------------------------------------------------- */ ::selection { background: rgba(0, 255, 148, 0.3); color: #fff; } ::-webkit-scrollbar { width: 11px; } ::-webkit-scrollbar-track { background: #070a09; } ::-webkit-scrollbar-thumb { background: #1d2723; border-radius: 999px; border: 3px solid #070a09; } ::-webkit-scrollbar-thumb:hover { background: #2a3b34; } /* ----- Form fields (Contact page) ---------------------------------------- */ .field-label { display: block; font-size: 14px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--txt-dim); margin-bottom: 8px; } .field-input { width: 100%; background: #0E0E0E; border: 1px solid #00E38333; border-radius: 2px; padding: 12px 8px; color: #fff; font-size: 16px; font-weight: 400; transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .field-input::placeholder { color: #5c6661; } .field-input:hover { border-color: rgba(255, 255, 255, 0.2); } .field-input:focus { outline: none; border-color: var(--brand); background: #0E0E0E; box-shadow: 0 0 0 3px rgba(0, 255, 148, 0.15); } textarea.field-input { resize: vertical; min-height: 150px; } /* invalid state shown after a submit attempt */ .field-input.invalid { border-color: var(--salmon); box-shadow: 0 0 0 3px rgba(255, 162, 157, 0.18); } .field-error { display: none; margin-top: 0.4rem; font-size: 0.78rem; color: var(--salmon); } .field-error.show { display: block; } /* contact info row */ .contact-row { display: flex; align-items: center; gap: 8px; color: #d6ddd9; transition: color 0.25s ease; } .contact-row:hover { color: #fff; } .contact-row svg { color: var(--brand); flex: none; } /* success toast */ .form-note { display: none; align-items: center; gap: 0.5rem; margin-top: 1rem; padding: 0.85rem 1rem; border-radius: 0.65rem; background: rgba(0, 255, 148, 0.1); border: 1px solid rgba(0, 255, 148, 0.35); color: var(--brand-bright); font-weight: 600; font-size: 0.9rem; } .form-note.show { display: flex; } /* ----- Mobile nav --------------------------------------------------------- */ .mobile-nav { transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; } .mobile-nav.hidden-panel { opacity: 0; transform: translateY(-12px); visibility: hidden; pointer-events: none; }