/* ========================================================================== BLACK JACK ENTERTAINMENT — MASTER STYLESHEET One system, three divisions. Do not fork this file per page. ARCHITECTURE 1. Tokens 2. Reset + base 3. Typography scale 4. Metal surfaces (the signature finish) 5. Layout primitives 6. Header / nav 7. Mascot system 8. Division rail (signature element) 9. Buttons + links 10. Cards (division doors, show tiles) 11. Forms (Netlify) 12. Footer 13. Motion — showcase vs direct mode 14. Responsive ========================================================================== */ /* 1. TOKENS ================================================================ */ :root { /* --- Core palette. Black / silver / grey. No exceptions outside TV. --- */ --ink: #08090B; /* deepest black — hero wells, footer */ --pit: #0E1013; /* default page background */ --graphite: #16191D; /* raised panels, cards */ --steel: #23272C; /* higher panels, form fields */ --rail: #383D44; /* borders, hairlines */ --silver: #9AA2AC; /* secondary text, captions */ --chrome: #DDE3E9; /* primary text */ --white-hot: #F5F8FA; /* headlines, mascot highlight */ /* --- Division accent. ONLY on Black Jack TV pages. See §RULES. --- */ --tv-green: #35D65E; --tv-green-dim: rgba(53, 214, 94, 0.25); /* --- Type --- */ --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif; --font-stencil: 'Big Shoulders Stencil Display', var(--font-display); --font-body: 'Barlow', system-ui, -apple-system, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; /* --- Scale (fluid) --- */ --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.13rem); --step-1: clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem); --step-2: clamp(1.8rem, 1.5rem + 1.4vw, 2.6rem); --step-3: clamp(2.6rem, 2rem + 3vw, 4.4rem); --step-4: clamp(3.4rem, 2.2rem + 6vw, 8rem); /* --- Space --- */ --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2.5rem; --s-5: 4rem; --s-6: 6.5rem; --s-7: 10rem; --measure: 62ch; --shell: 1240px; --radius: 2px; /* industrial. Almost square. Never round a panel. */ --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* Division scoping. Put class="tv" on for Black Jack TV pages only. This is the ONLY switch that unlocks green anywhere in the system. */ body.tv { --accent: var(--tv-green); } body { --accent: var(--silver); } /* 2. RESET + BASE ========================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--pit); color: var(--chrome); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } ::selection { background: var(--chrome); color: var(--ink); } :focus-visible { outline: 2px solid var(--white-hot); outline-offset: 3px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* 3. TYPOGRAPHY ============================================================ */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 0.92; letter-spacing: -0.015em; text-transform: uppercase; color: var(--white-hot); margin: 0 0 var(--s-3); text-wrap: balance; } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); } h4 { font-size: var(--step-1); } p { margin: 0 0 var(--s-3); max-width: var(--measure); } .lede { font-size: var(--step-1); color: var(--silver); line-height: 1.45; font-weight: 400; } /* Stencil is reserved for ONE job: naming which division you are standing in. It is crate-marking. Never use it for headlines or body copy. */ .stencil { font-family: var(--font-stencil); font-weight: 700; font-size: var(--step--1); letter-spacing: 0.34em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: var(--s-2); } /* Mono handles anything the reader treats as data, not prose. */ .meta { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.06em; color: var(--silver); text-transform: uppercase; } /* 4. METAL SURFACES ======================================================== */ /* Brushed steel is built from layered gradients — no image files, so it scales, stays sharp on retina, and costs nothing in page weight. */ .metal { position: relative; background: repeating-linear-gradient( 90deg, rgba(255,255,255,0.020) 0px, rgba(255,255,255,0.020) 1px, rgba(0,0,0,0.030) 1px, rgba(0,0,0,0.030) 2px, rgba(255,255,255,0.008) 2px, rgba(255,255,255,0.008) 4px ), linear-gradient(168deg, #2E343B 0%, #1B1F24 38%, #121519 66%, #23282E 100%); border: 1px solid var(--rail); border-radius: var(--radius); } /* Specular sweep — the light catching the plate. Sits above the brush. */ .metal::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( 112deg, transparent 18%, rgba(255,255,255,0.07) 42%, rgba(255,255,255,0.12) 48%, rgba(255,255,255,0.04) 55%, transparent 78% ); } /* Top edge highlight — sells the thickness of the panel. */ .metal::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28) 50%, transparent); pointer-events: none; } .metal-dark { background: repeating-linear-gradient( 90deg, rgba(255,255,255,0.014) 0px, rgba(255,255,255,0.014) 1px, rgba(0,0,0,0.040) 1px, rgba(0,0,0,0.040) 3px ), linear-gradient(180deg, #14171B 0%, #0B0D10 100%); border: 1px solid #262B31; } /* 5. LAYOUT ================================================================ */ .shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; } .section { padding-block: var(--s-6); } .section--tight { padding-block: var(--s-5); } .section--well { background: var(--ink); } .grid { display: grid; gap: var(--s-3); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .stack > * + * { margin-top: var(--s-3); } /* 6. HEADER / NAV ========================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(8, 9, 11, 0.88); backdrop-filter: blur(14px); border-bottom: 1px solid var(--rail); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-2); } .wordmark { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--white-hot); font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: 0.01em; text-transform: uppercase; line-height: 1; } .nav ul { display: flex; gap: var(--s-3); list-style: none; margin: 0; padding: 0; } .nav a { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--silver); text-decoration: none; padding-block: 0.4rem; border-bottom: 1px solid transparent; transition: color 0.25s var(--ease), border-color 0.25s var(--ease); } .nav a:hover, .nav a[aria-current="page"], .nav a[aria-current="true"] { /* "true" = a child page of that section */ color: var(--white-hot); border-bottom-color: var(--accent); } /* 7. MASCOT SYSTEM ========================================================= */ /* The dealer appears on every page, at one of three weights. Pick ONE per page. Two full-size mascots on one page kills him. */ /* (a) HERO — full figure, chrome-graded, page owner. */ .mascot-hero { width: min(46vw, 520px); filter: grayscale(1) contrast(1.22) brightness(1.06) drop-shadow(0 0 42px rgba(190, 205, 220, 0.16)) drop-shadow(0 22px 46px rgba(0, 0, 0, 0.85)); } /* (b) MARK — small, in header and footer, on every page. */ .mascot-mark { width: 34px; filter: grayscale(1) contrast(1.3) brightness(1.12); } /* (c) WATERMARK — embossed into a section, decorative, never above text. */ .mascot-watermark { position: absolute; right: -4%; bottom: -10%; width: min(52vw, 620px); opacity: 0.055; filter: grayscale(1) contrast(1.5); pointer-events: none; user-select: none; z-index: 0; } .has-watermark { position: relative; overflow: hidden; } .has-watermark > *:not(.mascot-watermark) { position: relative; z-index: 1; } /* 8. DIVISION RAIL — SIGNATURE ELEMENT ===================================== */ /* A brushed steel rail with a stenciled division name. It is not decoration: it marks every boundary between divisions so the reader always knows which company they are inside. This is the thing the site is remembered by. */ .rail { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); margin-block: var(--s-5); background: linear-gradient(180deg, #262B31 0%, #14171B 100%); border-top: 1px solid rgba(255,255,255,0.16); border-bottom: 1px solid #000; position: relative; } .rail::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px ); pointer-events: none; } .rail__label { font-family: var(--font-stencil); font-size: var(--step-1); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--white-hot); white-space: nowrap; } .rail__line { flex: 1; height: 1px; background: var(--rail); } .rail__index { font-family: var(--font-mono); font-size: 0.75rem; color: var(--silver); letter-spacing: 0.1em; } /* 9. BUTTONS + LINKS ======================================================= */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.95rem 1.9rem; font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: transform 0.2s var(--ease), background 0.25s, color 0.25s; } .btn--primary { background: linear-gradient(180deg, var(--white-hot) 0%, #B9C2CB 100%); color: var(--ink); border-color: var(--white-hot); } .btn--primary:hover { transform: translateY(-2px); background: var(--white-hot); } .btn--ghost { background: transparent; color: var(--chrome); border-color: var(--rail); } .btn--ghost:hover { border-color: var(--chrome); color: var(--white-hot); } /* TV pages get exactly one green control per page, no more. */ body.tv .btn--accent { background: transparent; color: var(--tv-green); border-color: var(--tv-green); } body.tv .btn--accent:hover { background: var(--tv-green); color: var(--ink); } /* 10. CARDS ================================================================ */ /* Division doors — the two choices on the homepage. */ .door { display: block; position: relative; padding: var(--s-5) var(--s-4); text-decoration: none; color: inherit; overflow: hidden; min-height: 340px; transition: transform 0.4s var(--ease); } .door:hover { transform: translateY(-5px); } .door__title { font-family: var(--font-display); font-size: var(--step-2); font-weight: 800; text-transform: uppercase; color: var(--white-hot); margin-bottom: var(--s-2); line-height: 0.92; } .door__cue { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver); transition: color 0.25s; } .door:hover .door__cue { color: var(--white-hot); } /* Show tiles — poster art carries these, so the chrome stays out of the way */ .show { position: relative; overflow: hidden; border: 1px solid var(--rail); border-radius: var(--radius); background: var(--graphite); } .show img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: saturate(0.82) contrast(1.05); transition: transform 0.6s var(--ease), filter 0.4s; } .show:hover img { transform: scale(1.04); filter: saturate(1) contrast(1.08); } /* Not every title ships portrait poster art. Landscape key art gets a tile two columns wide rather than a centre crop that decapitates the logo. */ .show--wide { grid-column: span 2; } .show--wide img { aspect-ratio: 4 / 3; } /* Spotlight — one title, full width, art at its natural ratio. */ .show--full { grid-column: 1 / -1; } .show--full img { aspect-ratio: auto; } .show__body { padding: var(--s-2) var(--s-3) var(--s-3); border-top: 1px solid var(--rail); } .show__title { font-family: var(--font-display); font-size: var(--step-1); font-weight: 800; text-transform: uppercase; color: var(--white-hot); margin: 0 0 0.25rem; line-height: 1; } /* Proof row — a number, then what it means. Staffing pages only. */ .stat { padding: var(--s-4) var(--s-3); } .stat__num { display: block; font-family: var(--font-display); font-size: var(--step-3); font-weight: 900; line-height: 0.86; color: var(--white-hot); margin-bottom: var(--s-1); } /* Numbered process steps. The number is data, so it is mono. */ .step { padding: var(--s-4) var(--s-3); } .step__num { display: block; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; color: var(--silver); margin-bottom: var(--s-2); } .step h3 { font-size: var(--step-1); } .step p { margin-bottom: 0; color: var(--silver); } /* Platform tiles — where to watch. Whole tile is the link. */ .platform { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3); text-decoration: none; color: inherit; transition: transform 0.35s var(--ease); } .platform:hover { transform: translateY(-3px); } .platform__name { display: block; font-family: var(--font-display); font-size: var(--step-1); font-weight: 800; text-transform: uppercase; line-height: 1; color: var(--white-hot); margin-bottom: 0.3rem; } .platform__cue { font-family: var(--font-mono); font-size: 1.1rem; color: var(--silver); flex: none; } .platform:hover .platform__cue { color: var(--white-hot); } /* Small badge. On TV pages this inherits green — one of the four sanctioned places green is allowed to appear. See §RULES. */ .badge { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); border: 1px solid currentColor; border-radius: 999px; padding: 0.4rem 0.9rem; margin-bottom: var(--s-3); } /* The guarantee. One line, above the fold, carries the employer page. */ .guarantee { font-family: var(--font-display); font-size: var(--step-2); font-weight: 800; text-transform: uppercase; line-height: 1; color: var(--white-hot); border-left: 3px solid var(--chrome); padding-left: var(--s-3); margin: 0 0 var(--s-3); max-width: 26ch; } /* 11. FORMS ================================================================ */ /* Netlify picks these up via data-netlify="true" + a hidden form-name input. Keep markup exactly as shown in the README or submissions will not fire. */ .form { max-width: 640px; } .field { margin-bottom: var(--s-3); } /* Direct-child scoping matters: `.field label` would also capture the labels wrapping each checkbox in a .choices group and flatten them. */ .field > label, .field__legend { display: block; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver); margin-bottom: 0.5rem; } .field > input, .field > select, .field > textarea { width: 100%; padding: 0.9rem 1rem; background: var(--steel); border: 1px solid var(--rail); border-radius: var(--radius); color: var(--white-hot); font-family: var(--font-body); font-size: 1rem; transition: border-color 0.2s, background 0.2s; } .field > input:focus, .field > select:focus, .field > textarea:focus { outline: none; border-color: var(--chrome); background: #2A2F35; } .field > textarea { min-height: 150px; resize: vertical; } .field--required > label::after, .field--required > .field__legend::after { content: ' *'; color: var(--chrome); } .form__note { font-family: var(--font-mono); font-size: 0.75rem; color: var(--silver); margin-top: var(--s-2); } /* Honeypot — hides the bot-bait field from humans. Required by Netlify. */ .hp { position: absolute; left: -9999px; } /* Numbered fieldsets. The job seeker form is long; the numbering is real sequence and it is what makes it read as short. */ .fieldset { border: 0; padding: 0; margin: 0 0 var(--s-5); } .fieldset__legend { display: flex; align-items: baseline; gap: var(--s-2); width: 100%; font-family: var(--font-display); font-size: var(--step-1); font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--white-hot); padding: 0 0 var(--s-2); margin-bottom: var(--s-3); border-bottom: 1px solid var(--rail); } .fieldset__num { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--silver); } /* Checkbox and radio groups. `.field input` is 100% wide by default — these controls have to opt out of that or the form collapses. */ .choices { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: var(--s-3); } .choices--tight { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .choice { display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 1rem; background: var(--graphite); border: 1px solid var(--rail); border-radius: var(--radius); color: var(--chrome); font-size: 0.95rem; line-height: 1.3; cursor: pointer; transition: border-color 0.2s, background 0.2s; } .choice:hover { border-color: var(--silver); background: var(--steel); } .choice input { width: 1.05rem; height: 1.05rem; flex: none; margin: 0; padding: 0; accent-color: var(--chrome); cursor: pointer; } .choice--wide { grid-column: 1 / -1; align-items: flex-start; } .choice--wide input { margin-top: 0.25rem; } /* Sub-label under a field label — sentence case, not a second shouted line. */ .field__hint { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: none; color: var(--silver); margin: -0.25rem 0 0.7rem; } /* 12. FOOTER =============================================================== */ .site-footer { background: var(--ink); border-top: 1px solid var(--rail); padding-block: var(--s-5) var(--s-3); margin-top: var(--s-6); } .site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--rail); } .site-footer h4 { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; color: var(--silver); margin-bottom: var(--s-2); text-transform: uppercase; } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin-bottom: 0.55rem; } .site-footer a { color: var(--chrome); text-decoration: none; font-size: 0.94rem; transition: color 0.2s; } .site-footer a:hover { color: var(--white-hot); } .site-footer__base { display: flex; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-3); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--silver); flex-wrap: wrap; } /* 13. MOTION =============================================================== */ /* TWO MODES. Set on . .mode-showcase → Home, TV, Shows. Full cinematic treatment. .mode-direct → Employers, Job Seekers, Contact, About, Staffing. Instant paint. Nothing stands between the reader and the form. This is a conversion decision, not a taste one. */ .reveal { opacity: 1; transform: none; } .mode-showcase .reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .mode-showcase .reveal.is-visible { opacity: 1; transform: none; } /* Staggered children — used on the door pair and the show grid. */ .mode-showcase .reveal-group > * { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .mode-showcase .reveal-group.is-visible > * { opacity: 1; transform: none; } .mode-showcase .reveal-group.is-visible > *:nth-child(2) { transition-delay: 0.12s; } .mode-showcase .reveal-group.is-visible > *:nth-child(3) { transition-delay: 0.24s; } .mode-showcase .reveal-group.is-visible > *:nth-child(4) { transition-delay: 0.36s; } .mode-showcase .reveal-group.is-visible > *:nth-child(5) { transition-delay: 0.48s; } /* Page-load sequence — showcase pages only. The dealer arrives, then the headline, then the doors. One orchestrated moment, then the page is calm. */ @keyframes deal-in { from { opacity: 0; transform: translateY(40px) scale(0.97); } to { opacity: 1; transform: none; } } @keyframes glint { from { background-position: -220% 0; } to { background-position: 220% 0; } } .mode-showcase .hero__mascot { animation: deal-in 1.1s var(--ease) both; } .mode-showcase .hero__title { animation: deal-in 1s var(--ease) 0.28s both; } .mode-showcase .hero__sub { animation: deal-in 1s var(--ease) 0.46s both; } .mode-showcase .hero__cta { animation: deal-in 1s var(--ease) 0.62s both; } /* Chrome text — the wordmark catches light once on load. Restraint: the glint runs a single time, not on a loop. Looping reads as a cheap banner. */ .chrome-text { background: linear-gradient( 100deg, #8C949E 0%, #E8EDF2 42%, #FFFFFF 50%, #E8EDF2 58%, #8C949E 100% ); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; } .mode-showcase .chrome-text { animation: glint 2.2s var(--ease) 0.5s 1 both; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .mode-showcase .reveal, .mode-showcase .reveal-group > * { opacity: 1; transform: none; } } /* 14. RESPONSIVE =========================================================== */ @media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .site-footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { :root { --s-6: 4rem; --s-7: 5.5rem; } .grid-2, .grid-3 { grid-template-columns: 1fr; } /* Single column — spanning two would conjure an implicit second column. */ .show--wide { grid-column: auto; } .mascot-hero { width: 68vw; } .nav ul { gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; } .nav a { font-size: 0.7rem; } .rail { flex-wrap: wrap; gap: var(--s-2); } .site-footer__grid { grid-template-columns: 1fr; } .site-footer__base { flex-direction: column; } }