/* March of Giants - brand bridge over the shared --gsc-* kit tokens. * * Palette: orange #CE7728, black, white (primary); blue #46717E, red #8E3302 (secondary). * Type: Sheepman Light for display (Adobe Fonts, linked in each page's useHead), * Noto Sans JP for body. */ html.march-of-giants:root { /* Brand primitives */ --mog-orange: #ce7728; --mog-orange-dark: #b16622; --mog-black: #000000; --mog-white: #ffffff; --mog-blue: #46717e; --mog-red: #8e3302; /* Surfaces - neutral greys, not the kit's blue-greys, so charcoal reads as charcoal */ --gsc-surface: var(--mog-black); --gsc-panel: #0d0d0d; --gsc-panel-raised: #191919; --gsc-border: rgba(255, 255, 255, 0.14); --gsc-border-strong: rgba(206, 119, 40, 0.55); /* Text */ --gsc-text: var(--mog-white); --gsc-text-muted: rgba(255, 255, 255, 0.66); --gsc-text-subtle: rgba(255, 255, 255, 0.42); /* Accent. Text on accent is black: 6.3:1 vs 3.3:1 for white, and the on-brand pairing. */ --gsc-accent: var(--mog-orange); --gsc-accent-hover: var(--mog-orange-dark); --gsc-accent-text: var(--mog-black); /* Header / nav chrome */ --gsc-header-bg: var(--mog-black); --gsc-header-border: rgba(255, 255, 255, 0.1); --gsc-nav-link: rgba(255, 255, 255, 0.66); --gsc-nav-link-active: var(--mog-orange); /* Typography */ --font-display: sheepman, 'Bahnschrift', 'DIN Alternate', 'Georgia', serif; --font-body: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic UI', system-ui, sans-serif; --gsc-font-display: var(--font-display); --gsc-font-body: var(--font-body); --gsc-font-brand: var(--font-display); /* Shape - angular, not soft */ --gsc-radius: 2px; --gsc-radius-sm: 2px; --gsc-radius-lg: 4px; --gsc-focus-ring: var(--mog-orange); --gsc-shadow: 0 4px 20px rgb(0 0 0 / 0.6); /* Form fields */ --gsc-field-bg: #0d0d0d; --gsc-field-panel-bg: #0d0d0d; --gsc-field-option-hover: #191919; --gsc-field-option-active: var(--mog-orange); --gsc-field-tag-bg: var(--mog-orange); --gsc-field-tag-text: var(--mog-black); /* Overlays */ --gsc-overlay-backdrop: rgb(0 0 0 / 0.82); --gsc-modal-bg: #0d0d0d; --gsc-modal-border: rgba(255, 255, 255, 0.14); /* Customization hooks */ --gsc-gradient-primary: linear-gradient(90deg, #ce7728 0%, #7a4718 100%); --gsc-header-rail: var(--gsc-gradient-primary); --gsc-footer-rail: var(--gsc-gradient-primary); /* The login screen's own background is cleared: the key art is now the plate behind it, and an opaque value here would paint over the video. */ --gsc-login-bg: transparent; } /* ── Key-art video plate (landing + login) ──────────────────────────────────── * Fixed so it holds still while the page scrolls, and inside #__nuxt - already a stacking * context via `isolation: isolate` - so these z-indexes stay away from the * panels teleported out to . * * No scrim: the video plays at full brightness. The black background is the base while it * loads, not a tint. */ html.march-of-giants .mog-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--mog-black); } html.march-of-giants .mog-bg__video { width: 100%; height: 100%; object-fit: cover; display: block; } /* Landing: `.mog-landing` is set in that page's useHead so the dashboard is untouched. `body` needs an explicit colour - the --gsc-* tokens only reach kit components. */ html.march-of-giants.mog-landing body { background-color: var(--gsc-surface); } html.march-of-giants.mog-landing .apply-wrapper { position: relative; z-index: 1; } /* Login: lift the kit's login screen above the plate. Safe to raise here - the login page has no select fields, and #__nuxt's isolation contains it regardless. */ html.march-of-giants .mog-login-page .creator-login { position: relative; z-index: 1; } /* ── Charcoal edges ─────────────────────────────────────────────────────────── * Ragged charcoal contours in place of crisp rectangles. Two masks: `mask-size: 100% 100%` * scales to the element, so a portrait mask on a landscape box halves its top/bottom rag. * Padding keeps text clear of the rough band. */ html.march-of-giants.mog-landing .gsc-card { border: 0; border-radius: 0; padding: clamp(34px, 5vw, 56px); -webkit-mask-image: url('/images/march-of-giants/charcoal-mask-tall.webp'); mask-image: url('/images/march-of-giants/charcoal-mask-tall.webp'); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } html.march-of-giants .creator-login__box { border: 0; border-radius: 0; padding: clamp(32px, 5vw, 48px); -webkit-mask-image: url('/images/march-of-giants/charcoal-mask-wide.webp'); mask-image: url('/images/march-of-giants/charcoal-mask-wide.webp'); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* "Before you can submit" notice - restated in the signature orange; the kit default is an off-palette yellow. Kept as a tint so it still reads as a caution, not a button. */ html.march-of-giants .form-renderer__issues { background: rgba(206, 119, 40, 0.1); border: 1px solid rgba(206, 119, 40, 0.4); border-left: 3px solid var(--mog-orange); border-radius: 0; color: var(--gsc-text); } html.march-of-giants .form-renderer__issues > i { color: var(--mog-orange); } html.march-of-giants .form-renderer__issues-title { font-family: var(--gsc-font-display); font-weight: 300; font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mog-orange); } /* Button labels use the content face, not the display face - Sheepman is reserved for titles and taglines, and reads small at button sizes. */ html.march-of-giants .creator-login__network.nui, html.march-of-giants .creator-application__network.nui, html.march-of-giants .creator-application__submit.nui { font-family: var(--gsc-font-body); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.01em; height: 52px; } /* `_shared.css` underlines every a[href] on hover; the kit's back link only re-colours. */ html.march-of-giants .creator-login__back:hover { text-decoration: none; } /* ── Login network grid ─────────────────────────────────────────────────────── * Labels stay on one line, so the box is widened to fit the longest one. `auto-fit` picks * the column count from the space available; 284px is the measured width at which * "Sign in with Instagram" fits without wrapping. */ html.march-of-giants .creator-login__box { width: 680px; } html.march-of-giants .creator-login__network.nui { white-space: nowrap; } html.march-of-giants .creator-login__networks { grid-template-columns: repeat(auto-fit, minmax(284px, 1fr)); } /* Five networks over two columns orphans the last one - span and centre it at one column's width, only where two columns are guaranteed. */ @media (min-width: 660px) { html.march-of-giants .creator-login__networks > *:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.5rem); } } /* ── Dashboard ──────────────────────────────────────────────────────────────── * Greyscale key-art plate, fixed so it holds still on long pages. No scrim: the source * is already low-key and a gradient over it crushes the artwork flat. */ html.march-of-giants .mog-dash-bg { position: fixed; inset: 0; pointer-events: none; background: #000000 url('/images/march-of-giants/dashboard-bg.webp') center / cover no-repeat; } /* Footer: powered-by mark left, legal + copyright stacked right. Grid areas rather than flex because the three are flat siblings; the mark spans both rows at 70% of their combined height. `.creator-footer__powered` is the