/* ============================================================================= PYRO — STYLESHEET ----------------------------------------------------------------------------- Style: the "anime battle" mockup in design/mockup.png, matched 1:1. The nav bar, logo, eyebrow box, red/blue chips, tags, card frames and the page background are the mockup's own artwork, cut out into assets/ui/ — they are not redrawn in CSS. Sizes are in "mockup pixels" (--u), so at 1649px wide the portfolio page lines up with the mockup exactly, and everything scales with the window from there. 1. Theme ← change colours / fonts here 2. Base + background 3. Layout helpers + type 4. Frames (cards), buttons, chips, tags 5. Nav 6. Hero + page headers 7. Sections (stats, about, specialties, featured cards) 8. Portfolio + lightbox 9. Pricing 10. Contributed games 11. Contact 12. CTA band + footer 13. Admin (commissions dashboard) 14. Motion (reveals, page transitions) ============================================================================= */ /* ============================================================================= 1. THEME ============================================================================= */ :root { --red: #ff2233; --red-hi: #ff6b74; --red-deep: #b3000f; --blue: #1f9dff; --blue-hi: #7cc8ff; --accent: var(--red); /* highlights, icons, focus */ --accent-fill: var(--red); --accent-ink: #ffffff; --glow: var(--red); --btn-border: linear-gradient(100deg, var(--red), var(--blue)); /* small skewed boxes (icons, arrows) */ /* Headline fills */ --chrome: linear-gradient(180deg, #ffffff 0%, #f3f5f8 38%, #9ea6b1 50%, #dde1e7 62%, #ffffff 100%); --red-text: linear-gradient(180deg, #ff8a91 0%, #ff2233 42%, #c00014 58%, #ff4b58 100%); --red-fill: linear-gradient(180deg, #ff4b57 0%, #ea1324 55%, #a8000e 100%); --bg: #0d0e12; /* shows past the edges of assets/ui/bg.jpg on very wide screens */ --bg-raised: #0e1014; --bg-card: #0f1115; --card-bg: linear-gradient(180deg, #121419 0%, #0b0c10 100%); --line: rgba(255, 255, 255, .1); --text: #ffffff; --text-dim: #d0d3da; --text-mute: #a0a6b1; --open: #36e38c; --closed: #ff4d58; --error: #ff5c67; --ember: #ff5a3a; /* Fonts (loaded from Google Fonts in each page's ) */ --font-display: "Anton", Impact, "Arial Black", sans-serif; /* big chrome headlines */ --font-label: "Bebas Neue", "Arial Narrow", Impact, sans-serif; /* nav, chips, buttons, card titles */ --font-head: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; /* small headings, tags */ --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* Scale. --u is one pixel of the 1649px-wide mockup at the current window width (--sbw = scrollbar width, set by js/layout.js). --k sizes chips, buttons and tags (never smaller than .66 so phones stay readable), --fk sizes the card frames. */ --page-max: 1920px; --u: calc(min(100vw - var(--sbw, 0px), var(--page-max)) / 1649); --k: max(var(--u), .66px); --fk: min(var(--k), 1px); --gutter: 16px; --wrap-pad: max(var(--gutter), calc(62 * var(--u))); /* the mockup's 62px side margin */ --skew: -12deg; /* slant of small icon boxes */ --radius-sm: 4px; --ease: cubic-bezier(.2, .8, .2, 1); } /* ============================================================================= 2. BASE + BACKGROUND ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } /* The mockup's background (slashes + halftone), repeated down the page */ html { scroll-behavior: smooth; scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; background: var(--bg) url("../assets/ui/bg.jpg") center top / min(100%, var(--page-max)) auto repeat-y; } body { margin: 0; color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, video, iframe { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } [hidden] { display: none !important; } html.lb-lock { overflow: hidden; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } ::selection { background: var(--red); color: #fff; } :focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 3px; } .sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: 12px; left: 12px; z-index: 200; padding: 10px 16px; background: var(--red); color: #fff; font-family: var(--font-label); font-size: 20px; text-transform: uppercase; transform: translateY(-160%); transition: transform .2s var(--ease); } .skip-link:focus { transform: none; } /* ============================================================================= 3. LAYOUT HELPERS + TYPE ============================================================================= */ .wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--wrap-pad); } .section { padding-block: clamp(64px, calc(110 * var(--u)), 130px); } .section--tight { padding-block: clamp(40px, calc(64 * var(--u)), 80px); } .section-head { margin-bottom: clamp(32px, calc(52 * var(--u)), 64px); max-width: 980px; } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 800; font-style: italic; line-height: 1.05; text-transform: uppercase; margin: 0; text-wrap: balance; } /* Big chrome headlines (the highlighted word turns red). Anton has no italic, so the browser slants it like the mockup's lettering. */ .hero-title, .page-title, .cta-title, .h2, .pg-title { font-family: var(--font-display); font-style: italic; font-weight: 400; line-height: 1; letter-spacing: .01em; padding: .04em .14em .06em .02em; /* room for the slant */ background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; /* The stroke is see-through, and the chrome fills it too (background-clip includes the stroke), so the letters come out fatter than plain Anton. Raise --fat for thicker letters. The dark outline is the first four shadows (one per side) — raise --edge for a thicker outline. */ --edge: .018em; -webkit-text-stroke: var(--fat, .03em) transparent; paint-order: stroke fill; filter: drop-shadow(var(--edge) 0 0 #06070a) drop-shadow(calc(var(--edge) * -1) 0 0 #06070a) drop-shadow(0 var(--edge) 0 #06070a) drop-shadow(0 calc(var(--edge) * -1) 0 #06070a) drop-shadow(0 .03em 0 #000) drop-shadow(0 0 .16em rgba(255, 34, 51, .5)); } .hl { background: var(--red-text); -webkit-background-clip: text; background-clip: text; color: transparent; /* the slanted last letter leans past the word's box — stretch the red over it */ padding-right: .25em; margin-right: -.25em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .h2 { font-size: clamp(40px, calc(84 * var(--u)), 96px); } .h3 { font-size: clamp(24px, 2.6vw, 32px); } .lead { font-size: clamp(17px, calc(21 * var(--u)), 24px); line-height: 1.43; color: var(--text-dim); max-width: 62ch; } /* The red "PORTFOLIO" box above headings — assets/ui/eyebrow.webp. 3-slice: the two slanted ends stay put, the middle stretches with the text. The element box is the red box itself; the sparks around it hang outside (border-image-outset). */ .eyebrow { --s: var(--k); display: inline-flex; align-items: center; justify-content: center; height: calc(50 * var(--s)); min-width: calc(236 * var(--s)); margin: calc(20 * var(--s)) 0 calc(18 * var(--s)) calc(49 * var(--s)); padding: 0 calc(58 * var(--s)) 0 calc(62 * var(--s)); border: 0 solid transparent; border-image: url("../assets/ui/eyebrow.webp") 0 122 0 120 fill / 0 calc(122 * var(--s)) 0 calc(120 * var(--s)) / calc(20 * var(--s)) calc(77 * var(--s)) calc(13 * var(--s)) calc(49 * var(--s)); font-family: var(--font-label); font-style: italic; font-weight: 400; font-size: calc(30 * var(--s)); line-height: 1; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; color: #fff; } /* ============================================================================= 4. FRAMES, BUTTONS, CHIPS, TAGS ----------------------------------------------------------------------------- .glow-box = a card in one of the mockup's electric frames (9-slice of assets/ui/frame-red.webp / frame-blue.png, alternating). The frame's own dark inside is the card background. ============================================================================= */ .glow-box { position: relative; border: 0 solid transparent; border-image: url("../assets/ui/frame-red.webp") 60 50 70 45 fill / calc(60 * var(--fk)) calc(50 * var(--fk)) calc(70 * var(--fk)) calc(45 * var(--fk)) / calc(28 * var(--fk)) calc(11 * var(--fk)) calc(50 * var(--fk)) calc(12 * var(--fk)); transition: transform .35s var(--ease), filter .3s var(--ease); } .glow-box:nth-child(even) { border-image: url("../assets/ui/frame-blue.webp") 62 58 72 45 fill / calc(62 * var(--fk)) calc(58 * var(--fk)) calc(72 * var(--fk)) calc(45 * var(--fk)) / calc(30 * var(--fk)) calc(41 * var(--fk)) calc(51 * var(--fk)) calc(14 * var(--fk)); } .glow-box:hover, .glow-box:focus-within { filter: brightness(1.08); } /* how far pictures inside a frame stay from its edge */ .glow-box { --inset: calc(14 * var(--fk)); } .lift:hover, .lift:focus-within { transform: translateY(-6px); } .card { overflow: hidden; } /* ---- Buttons + filter chips: the mockup's blue / red chips ------------------ 3-slice of assets/ui/chip-blue.webp (normal) and chip-red.png (primary / selected). --s scales one; the box is the chip's parallelogram. */ .btn, .chip { --s: var(--k); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: calc(16 * var(--s)); height: calc(56 * var(--s)); min-width: calc(100 * var(--s)); padding: calc(3 * var(--s)) calc(44 * var(--s)) 0 calc(46 * var(--s)); border: 0 solid transparent; border-image: url("../assets/ui/chip-blue.webp") 0 64 0 61 fill / 0 calc(64 * var(--s)) 0 calc(61 * var(--s)) / calc(14 * var(--s)) calc(19 * var(--s)) calc(12 * var(--s)) calc(11 * var(--s)); background: none; color: #fff; font-family: var(--font-label); font-style: italic; font-weight: 400; font-size: calc(25.7 * var(--s)); line-height: 1; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: filter .25s, transform .25s var(--ease); } .btn:hover, .btn:focus-visible, .chip:hover, .chip:focus-visible { filter: brightness(1.25) drop-shadow(0 0 8px rgba(31, 157, 255, .55)); } .btn:hover, .btn:focus-visible { transform: translateY(-2px); } .btn:active { transform: none; } .btn--primary, .chip[aria-pressed="true"] { padding-inline: calc(66 * var(--s)) calc(64 * var(--s)); border-image: url("../assets/ui/chip-red.webp") 0 64 0 66 fill / 0 calc(64 * var(--s)) 0 calc(66 * var(--s)) / calc(16 * var(--s)) calc(7 * var(--s)) calc(16 * var(--s)) calc(11 * var(--s)); } .btn--primary:hover, .btn--primary:focus-visible, .chip[aria-pressed="true"]:hover { filter: brightness(1.12) drop-shadow(0 0 10px rgba(255, 34, 51, .6)); } .btn--sm { --s: calc(var(--k) * .78); } .btn[disabled] { opacity: .45; pointer-events: none; } .btn svg { width: .8em; height: .8em; flex: none; } .btn .arrow { transition: transform .3s var(--ease); } .btn:hover .arrow { transform: translateX(4px); } .btn-row { display: flex; flex-wrap: wrap; gap: 14px 0; } .btn-row .btn { margin-right: calc(4 * var(--s)); } .text-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-label); font-style: italic; font-size: 22px; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; color: var(--red-hi); } .text-link svg { width: 16px; height: 16px; transition: transform .3s var(--ease); } .text-link:hover { color: #fff; } .text-link:hover svg { transform: translateX(4px); } /* ---- Tag: the dark "Characters" label from the cards (assets/ui/tag.webp) -- */ .tag { --s: calc(var(--k) * .82); display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: calc(38 * var(--s)); min-width: calc(104 * var(--s)); padding: 0 calc(30 * var(--s)) 0 calc(33 * var(--s)); border: 0 solid transparent; border-image: url("../assets/ui/tag.webp") 0 56 0 53 fill / 0 calc(56 * var(--s)) 0 calc(53 * var(--s)) / calc(2 * var(--s)) calc(2 * var(--s)) calc(2 * var(--s)) calc(3 * var(--s)); font-family: var(--font-head); font-style: italic; font-weight: 600; font-size: calc(23 * var(--s)); line-height: 1; white-space: nowrap; color: #fff; } .tag svg { width: 1em; height: 1em; } .tags { display: flex; flex-wrap: wrap; gap: 10px 4px; } ul.tags { list-style: none; margin: 0; padding: 0; } .badge { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px; transform: skewX(var(--skew)); font-family: var(--font-head); font-weight: 800; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; } .badge::before { content: ""; width: 8px; height: 8px; background: currentColor; box-shadow: 0 0 10px currentColor; } .badge--open { color: var(--open); background: rgba(54, 227, 140, .12); border: 1px solid rgba(54, 227, 140, .45); } .badge--closed { color: var(--closed); background: rgba(255, 77, 88, .12); border: 1px solid rgba(255, 77, 88, .45); } .badge--open::before { animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 50% { opacity: .35; } } /* ============================================================================= 5. NAV — the mockup's nav bar (assets/ui/nav.webp) with real links on top. Positions are mockup pixels of the bar (--n = 1/1649 of its width). ============================================================================= */ .site-header { position: relative; z-index: 100; max-width: var(--page-max); margin-inline: auto; aspect-ratio: 1649 / 176; background: url("../assets/ui/nav.webp") 0 0 / 100% 100% no-repeat; container-type: inline-size; --n: calc(100cqw / 1649); } .site-header .wrap { max-width: none; height: 100%; padding: 0; } .nav { position: relative; height: 100%; } /* The logo is part of the bar; this invisible link sits over it and lights it up on hover. */ .logo { display: flex; align-items: center; flex: none; text-decoration: none; } .site-header .logo { position: absolute; left: calc(60 * var(--n)); top: calc(8 * var(--n)); width: calc(285 * var(--n)); height: calc(150 * var(--n)); } .site-header .logo img { position: absolute; left: calc(-56 * var(--n)); top: calc(-8 * var(--n)); width: calc(342 * var(--n)); height: calc(176 * var(--n)); max-width: none; opacity: 0; filter: brightness(1.25) drop-shadow(0 0 calc(10 * var(--n)) rgba(255, 34, 51, .8)); transition: opacity .3s var(--ease); } .site-header .logo:hover img, .site-header .logo:focus-visible img { opacity: 1; } .logo-text { font-family: var(--font-display); font-style: italic; font-size: 34px; } .nav-menu { position: absolute; inset: 0; pointer-events: none; } .nav-links { margin: 0; padding: 0; list-style: none; } .nav-links li { position: absolute; top: calc(41 * var(--n)); height: calc(64 * var(--n)); } /* one slot per page, where the mockup has them */ .nav-links li:nth-child(1) { left: calc(323 * var(--n)); width: calc(187 * var(--n)); } .nav-links li:nth-child(2) { left: calc(507 * var(--n)); width: calc(227 * var(--n)); } .nav-links li:nth-child(3) { left: calc(709 * var(--n)); width: calc(195 * var(--n)); } .nav-links li:nth-child(4) { left: calc(878 * var(--n)); width: calc(241 * var(--n)); } .nav-links li:nth-child(5) { left: calc(1088 * var(--n)); width: calc(206 * var(--n)); } .nav-links li:nth-child(n+6) { display: none; } .nav-links a { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: calc(3 * var(--n)) 0 0 calc(27 * var(--n)); pointer-events: auto; font-family: var(--font-label); font-style: italic; font-weight: 400; font-size: calc(28.6 * var(--n)); line-height: 1; letter-spacing: .01em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: #fff; } /* The red segment (assets/ui/nav-active.webp) behind the current page */ .nav-links a::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 0 solid transparent; border-image: url("../assets/ui/nav-active.webp") 0 90 0 102 fill / 0 calc(90 * var(--n)) 0 calc(102 * var(--n)) / calc(33 * var(--n)) calc(48 * var(--n)) calc(39 * var(--n)) calc(29 * var(--n)); opacity: 0; transition: opacity .25s var(--ease); } .nav-links a:hover::before, .nav-links a:focus-visible::before { opacity: .45; } .nav-links a[aria-current="page"]::before { opacity: 1; } .nav-links a:focus-visible { outline: none; } .nav-socials { position: absolute; left: calc(1336 * var(--n)); top: calc(42 * var(--n)); width: calc(204 * var(--n)); height: calc(66 * var(--n)); display: flex; } .icon-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: #fff; transition: color .25s, filter .25s; } .icon-btn svg { width: 21px; height: 21px; } .icon-btn:hover, .icon-btn:focus-visible { filter: drop-shadow(0 0 6px var(--red)) drop-shadow(0 0 2px var(--red)); } .site-header .nav-socials .icon-btn { width: calc(68 * var(--n)); height: 100%; } .site-header .nav-socials .icon-btn svg { width: calc(37 * var(--n)); height: calc(37 * var(--n)); } .nav-toggle { display: none; } .nav-toggle .bars { position: relative; width: 22px; height: 14px; } .nav-toggle .bars span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform .3s var(--ease), opacity .2s; } .nav-toggle .bars span:nth-child(1) { top: 0; } .nav-toggle .bars span:nth-child(2) { top: 6px; } .nav-toggle .bars span:nth-child(3) { top: 12px; } .nav-toggle[aria-expanded="true"] .bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Phones + small tablets: the logo, the socials and a menu button; the links drop down in a frame as chips. */ @media (max-width: 1080px) { .site-header { aspect-ratio: auto; height: 92px; background: none; container-type: normal; } .nav { display: flex; align-items: center; gap: 6px; padding: 0 14px 0 6px; } .site-header .logo { position: relative; inset: auto; z-index: 2; width: auto; height: auto; } .site-header .logo img { position: static; width: auto; height: 84px; opacity: 1; filter: none; } .site-header .logo:hover img { filter: brightness(1.2) drop-shadow(0 0 8px rgba(255, 34, 51, .7)); } .site-header .nav-socials { position: relative; inset: auto; z-index: 2; width: auto; height: auto; margin-left: auto; } .site-header .nav-socials .icon-btn { width: 42px; height: 44px; } .site-header .nav-socials .icon-btn svg { width: 22px; height: 22px; } .nav-toggle { --s: .8px; position: relative; z-index: 2; display: grid; place-items: center; width: calc(96 * var(--s)); height: calc(56 * var(--s)); margin-left: 6px; border: 0 solid transparent; border-image: url("../assets/ui/chip-red.webp") 0 64 0 66 fill / 0 calc(64 * var(--s)) 0 calc(66 * var(--s)) / calc(16 * var(--s)) calc(7 * var(--s)) calc(16 * var(--s)) calc(11 * var(--s)); background: none; color: #fff; } .nav-toggle:hover { filter: brightness(1.15) drop-shadow(0 0 8px rgba(255, 34, 51, .6)); } .nav-menu { inset: calc(100% + 8px) 14px auto; padding: 30px 26px 34px; pointer-events: auto; border: 0 solid transparent; border-image: url("../assets/ui/frame-blue.webp") 62 58 72 45 fill / 62px 58px 72px 45px / 30px 41px 51px 14px; background: rgba(7, 8, 11, .92); box-shadow: 0 0 0 100vmax rgba(3, 4, 6, .72); /* dims the page behind the open menu */ opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s; } .nav-menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--ease), transform .25s var(--ease); } .nav-links { display: grid; gap: 14px; } .nav-links li, .nav-links li:nth-child(n) { position: static; width: auto; height: auto; } .nav-links li:nth-child(n+6) { display: block; } /* each link becomes a chip (same pieces as .chip) */ .nav-links a { --s: .92px; width: min(100%, 260px); height: calc(56 * var(--s)); padding: calc(3 * var(--s)) calc(44 * var(--s)) 0 calc(46 * var(--s)); justify-content: flex-start; font-size: 26px; border: 0 solid transparent; border-image: url("../assets/ui/chip-blue.webp") 0 64 0 61 fill / 0 calc(64 * var(--s)) 0 calc(61 * var(--s)) / calc(14 * var(--s)) calc(19 * var(--s)) calc(12 * var(--s)) calc(11 * var(--s)); } .nav-links a[aria-current="page"] { border-image: url("../assets/ui/chip-red.webp") 0 64 0 66 fill / 0 calc(64 * var(--s)) 0 calc(66 * var(--s)) / calc(16 * var(--s)) calc(7 * var(--s)) calc(16 * var(--s)) calc(11 * var(--s)); } .nav-links a::before { display: none; } .nav-links a:hover { filter: brightness(1.2); } } @media (max-width: 440px) { .site-header { height: 80px; } .site-header .logo img { height: 72px; } .site-header .nav-socials .icon-btn { width: 34px; } .site-header .nav-socials .icon-btn svg { width: 19px; height: 19px; } } /* ============================================================================= 6. HERO + PAGE HEADERS ============================================================================= */ .hero { position: relative; isolation: isolate; padding: clamp(24px, calc(40 * var(--u)), 60px) 0 clamp(56px, calc(100 * var(--u)), 120px); overflow: hidden; } .hero-bg, .embers { display: none; } /* the mockup background does this job now */ .hero-inner { max-width: 1180px; padding-left: calc(30 * var(--u)); } .hero-title { font-size: clamp(48px, calc(128 * var(--u)), 150px); line-height: .95; } .hero-sub { margin: clamp(18px, calc(26 * var(--u)), 32px) 0 clamp(28px, calc(38 * var(--u)), 44px) calc(81 * var(--u)); max-width: 58ch; font-size: clamp(17px, calc(21 * var(--u)), 24px); line-height: 1.43; color: var(--text-dim); } .hero .btn-row { padding-left: calc(60 * var(--u)); } .status-pill { --s: calc(var(--k) * .82); display: inline-flex; align-items: center; gap: 12px; height: calc(56 * var(--s)); margin: 0 0 20px calc(40 * var(--u)); padding: 0 calc(44 * var(--s)) 0 calc(46 * var(--s)); border: 0 solid transparent; border-image: url("../assets/ui/chip-blue.webp") 0 64 0 61 fill / 0 calc(64 * var(--s)) 0 calc(61 * var(--s)) / calc(14 * var(--s)) calc(19 * var(--s)) calc(12 * var(--s)) calc(11 * var(--s)); font-weight: 600; font-size: 15px; color: var(--text-dim); text-decoration: none; } .status-pill .badge { transform: none; } .status-pill:hover { color: #fff; filter: brightness(1.2); } /* The chip art is one line tall; on phones the sentence wraps, so it sits beside the badge as plain text instead. */ @media (max-width: 600px) { .status-pill { align-items: flex-start; height: auto; margin-left: 0; padding: 0; border-image: none; line-height: 1.4; } .status-pill .badge { flex: none; margin-top: 1px; } } /* Top of the inner pages — laid out like the mockup: eyebrow box, big title, indented subtitle. The portfolio title is the mockup's own lettering (SITE.pages.portfolio.titleImage); the others are set in Anton. */ .page-head { padding: 0; } .page-head .eyebrow { margin: calc(-11 * var(--u)) 0 0 calc(49 * var(--u)); } .page-title { margin: calc(12 * var(--u)) 0 0 calc(34 * var(--u)); font-size: clamp(46px, calc(118 * var(--u)), 140px); line-height: .95; } .page-head .lead { margin: calc(14 * var(--u)) 0 0 calc(111.5 * var(--u)); max-width: max(calc(700 * var(--u)), 34ch); color: #e8e9ed; } .page-title--art { width: max(calc(1154 * var(--u)), min(100%, 440px)); margin: calc(-31 * var(--u)) 0 0 calc(-4 * var(--u)); padding: 0; background: none; -webkit-text-stroke: 0; filter: none; line-height: 0; } .page-title--art img { width: 100%; height: auto; } .page-title--art + .lead { margin-top: calc(-37 * var(--u)); } .page-head + .section { padding-top: max(20px, calc(25 * var(--u))); } @media (max-width: 760px) { .page-head .eyebrow { margin-top: 4px; } .page-title { margin-left: 0; } .page-head .lead, .page-title--art + .lead { margin: 12px 0 0 4px; } } /* ============================================================================= 7. SECTIONS ============================================================================= */ /* ---- Stat blocks ------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; } /* 2 × 2 on tablets rather than 3 + a lonely 4th */ @media (max-width: 980px) and (min-width: 521px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .stat { padding: 26px 28px 24px; } .stat-value { display: block; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(40px, calc(60 * var(--u)), 68px); line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 20px rgba(255, 34, 51, .45); -webkit-text-stroke: .025em currentColor; /* a little fatter, like the headlines */ } .stat-label { display: block; margin-top: 10px; font-family: var(--font-label); font-style: italic; font-size: 21px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-mute); } /* small stat row used inside cards */ .mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); } .mini-stats .stat { padding: 0; } .mini-stats .stat-value { font-family: var(--font-label); font-size: clamp(28px, 2.6vw, 36px); white-space: nowrap; text-shadow: none; } .mini-stats .stat-label { font-size: 17px; margin-top: 4px; } /* ---- About --------------------------------------------------------------- */ .about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, calc(80 * var(--u)), 100px); align-items: center; } .avatar { aspect-ratio: 1; padding: var(--inset); } .avatar img { width: 100%; height: 100%; object-fit: cover; } .about-body .lead { color: var(--text-dim); } .about-body .h2 { margin-bottom: 20px; } .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 28px 0 26px; } .fact { padding: 14px 18px; border-left: 4px solid var(--red); background: linear-gradient(90deg, rgba(255, 34, 51, .12), rgba(12, 13, 17, .75)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); } .fact:nth-child(even) { border-left-color: var(--blue); background: linear-gradient(90deg, rgba(31, 157, 255, .12), rgba(12, 13, 17, .75)); } .fact dt { font-family: var(--font-head); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); } .fact dd { margin: 2px 0 0; font-family: var(--font-label); font-style: italic; font-size: 30px; line-height: 1.1; } .tools-label { margin-bottom: 12px; font-family: var(--font-head); font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); } @media (max-width: 820px) { .about { grid-template-columns: 1fr; } .avatar { max-width: 420px; } } /* ---- Specialty cards ----------------------------------------------------- */ .grid { display: grid; gap: 30px 26px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } .spec { padding: 30px 28px 34px; } .spec-icon { display: grid; place-items: center; width: 58px; height: 50px; margin: 0 0 22px 6px; transform: skewX(var(--skew)); border: 2px solid var(--red); background: rgba(255, 34, 51, .12); box-shadow: 0 0 16px -4px rgba(255, 34, 51, .8); color: #fff; } .spec:nth-child(even) .spec-icon { border-color: var(--blue); background: rgba(31, 157, 255, .12); box-shadow: 0 0 16px -4px rgba(31, 157, 255, .8); } .spec-icon svg { width: 26px; height: 26px; transform: skewX(calc(var(--skew) * -1)); } .spec h3 { font-family: var(--font-label); font-weight: 400; font-size: 34px; margin-bottom: 10px; } .spec p { color: var(--text-dim); font-size: 16px; } /* ---- Featured (big) cards ------------------------------------------------ */ .featured-list { display: grid; gap: 40px; } .feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: 440px; padding: var(--inset); } .feature:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .feature:nth-child(even) .feature-media { order: 2; } .media { position: relative; overflow: hidden; background: #0b0c10; } .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .5s; } .card:hover .media img, .card:focus-within .media img { transform: scale(1.06); } .feature-body { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: clamp(24px, 3.4vw, 44px); } .feature-body .h3 { font-family: var(--font-label); font-weight: 400; font-size: clamp(40px, 4.4vw, 60px); } .feature-body p { color: var(--text-dim); } .feature-body .mini-stats { margin-top: auto; align-self: stretch; } @media (max-width: 860px) { .feature, .feature:nth-child(even) { grid-template-columns: 1fr; min-height: 0; } .feature:nth-child(even) .feature-media { order: 0; } .feature-media { aspect-ratio: 16 / 10; } } /* ============================================================================= 8. PORTFOLIO + LIGHTBOX ============================================================================= */ .filters { display: grid; gap: 18px; padding-left: calc(23 * var(--u)); } .filter-row { display: flex; flex-wrap: wrap; align-items: center; row-gap: calc(12 * var(--k)); } .filter-row .chip { margin-right: calc(-9 * var(--s)); } .filter-row--sub { padding-left: calc(30 * var(--u)); animation: drop .35s var(--ease); } @keyframes drop { from { opacity: 0; translate: 0 -6px; } } .chip .count { color: #ff2a36; } .chip[aria-pressed="true"] { gap: calc(27 * var(--s)); font-size: calc(31 * var(--s)); } .chip[aria-pressed="true"] .count { color: rgba(255, 214, 217, .82); } .chip--sub { --s: calc(var(--k) * .8); } .results-note { margin: calc(13.5 * var(--u)) 0 0; padding-left: calc(62 * var(--u)); font-size: max(15px, calc(17 * var(--u))); line-height: 1.41; color: #e6e7eb; } /* The cards: each one wears one of the mockup's four frames (assets/ui/card-1..4.png, in turn). The box is the frame's inside; the picture is clipped to the frame's window, the frame's lower panel holds the title, and the arrow + red bar are part of the frame art. */ .work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items: start; gap: max(56px, calc(84 * var(--u))) max(26px, calc(29 * var(--u))); margin: calc(13.5 * var(--u)) calc(-7 * var(--u)) 0; } @media (min-width: 1181px) { /* four across, each as wide as its frame is in the mockup */ .work-grid { grid-template-columns: 374fr 353fr 363fr 366fr; } } .work { --w: 374; --s: calc(100cqw / var(--w)); /* one mockup pixel inside this card */ position: relative; container-type: inline-size; aspect-ratio: 374 / 315; text-align: left; color: inherit; transition: transform .35s var(--ease); } .work::before { /* the frame */ content: ""; position: absolute; z-index: 1; inset: -9.2063% -4.5455% -19.3651% -8.8235%; background: url("../assets/ui/card-1.webp") 0 0 / 100% 100% no-repeat; pointer-events: none; transition: filter .3s var(--ease); } .work:hover::before, .work:focus-within::before { filter: brightness(1.18) saturate(1.1); } .work .media { /* the picture window */ position: absolute; z-index: 0; left: 2.139%; top: .952%; width: 97.059%; height: 66.349%; clip-path: polygon(3.857% 1.435%, 100% 0, 98.347% 100%, 0 100%); background: #0b0c10; } .work .media img { position: absolute; inset: 0; } .work:nth-child(4n+2) { --w: 353; aspect-ratio: 353 / 313; } .work:nth-child(4n+2)::before { inset: -9.9042% -5.0992% -19.4888% -2.2663%; background-image: url("../assets/ui/card-2.webp"); } .work:nth-child(4n+2) .media { left: 1.7%; top: .958%; width: 97.45%; height: 66.134%; clip-path: polygon(2.907% .483%, 100% 0, 98.547% 100%, 0 100%); } .work:nth-child(4n+3) { --w: 363; aspect-ratio: 363 / 313; } .work:nth-child(4n+3)::before { inset: -9.9042% -3.8567% -19.4888% -3.8567%; background-image: url("../assets/ui/card-3.webp"); } .work:nth-child(4n+3) .media { left: 1.102%; top: .958%; width: 98.072%; height: 66.454%; clip-path: polygon(2.247% .481%, 100% 0, 98.876% 100%, 0 100%); } .work:nth-child(4n+4) { --w: 366; aspect-ratio: 366 / 312; } .work:nth-child(4n+4)::before { inset: -10.2564% -11.4754% -19.5513% -4.3716%; background-image: url("../assets/ui/card-4.webp"); } .work:nth-child(4n+4) .media { left: 1.093%; top: .962%; width: 98.087%; height: 66.346%; clip-path: polygon(2.228% .483%, 100% 0, 98.329% 100%, 0 100%); } /* category tag (top left) + picture count (top right) */ .work .work-tag { --s: inherit; position: absolute; z-index: 2; left: calc(25 * var(--s)); top: calc(11 * var(--s)); pointer-events: none; } .work-count { position: absolute; z-index: 2; right: calc(9 * var(--s)); top: calc(13 * var(--s)); display: inline-flex; align-items: center; justify-content: center; height: calc(34 * var(--s)); min-width: calc(65 * var(--s)); padding: calc(2 * var(--s)) calc(10 * var(--s)) 0 calc(39.5 * var(--s)); border: 0 solid transparent; border-image: url("../assets/ui/count.webp") 0 12 0 40 fill / 0 calc(12 * var(--s)) 0 calc(40 * var(--s)) / calc(2.5 * var(--s)); font-family: var(--font-label); font-style: italic; font-size: calc(24 * var(--s)); line-height: 1; color: #fff; pointer-events: none; } .work:nth-child(4n+2) .work-tag { left: calc(23 * var(--s)); top: calc(9 * var(--s)); } .work:nth-child(4n+3) .work-tag { left: calc(16 * var(--s)); top: calc(9 * var(--s)); } .work:nth-child(4n+4) .work-tag { left: calc(16 * var(--s)); top: calc(10 * var(--s)); } .work:nth-child(4n+2) .work-count { right: calc(7 * var(--s)); top: calc(11 * var(--s)); } .work:nth-child(4n+3) .work-count { right: calc(11 * var(--s)); top: calc(10.5 * var(--s)); } .work:nth-child(4n+4) .work-count { right: calc(13 * var(--s)); top: calc(10 * var(--s)); } /* title (+ optional caption) in the frame's lower panel */ .work-body { position: absolute; z-index: 2; left: calc(42 * var(--s)); right: calc(30 * var(--s)); top: calc(221.5 * var(--s)); } .work:nth-child(4n+2) .work-body { left: calc(30 * var(--s)); top: calc(219.5 * var(--s)); } .work:nth-child(4n+3) .work-body { left: calc(32 * var(--s)); top: calc(220.5 * var(--s)); } .work:nth-child(4n+4) .work-body { left: calc(37 * var(--s)); top: calc(220.5 * var(--s)); } .work-body h3 { overflow: hidden; font-family: var(--font-label); font-style: italic; font-weight: 400; font-size: calc(35.7 * var(--s)); line-height: 1; letter-spacing: .005em; white-space: nowrap; text-overflow: ellipsis; -webkit-text-stroke: .012em #fff; padding-right: .15em; } .work-body p { max-width: calc(236 * var(--s)); margin-top: calc(6 * var(--s)); font-size: calc(17 * var(--s)); line-height: 1.3; color: #eceef2; } /* The title is the button; its ::after stretches over the whole card */ .work-btn { all: unset; cursor: pointer; } .work-btn::after { content: ""; position: absolute; inset: 0; z-index: 3; } .work:has(.work-btn:focus-visible) { outline: 2px solid var(--blue-hi); outline-offset: 6px; } .work:hover .media img, .work:focus-within .media img { transform: scale(1.06); } .empty { padding: 60px 20px; text-align: center; color: var(--text-mute); border: 2px dashed rgba(31, 157, 255, .35); } /* ---- Lightbox (native ) ----------------------------------------- */ .lightbox { width: min(1180px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 12px; border: 0 solid transparent; border-image: url("../assets/ui/frame-red.webp") 60 50 70 45 fill / 60px 50px 70px 45px / 28px 11px 50px 12px; background: transparent; color: var(--text); overflow: visible; } .lightbox::backdrop { background: rgba(0, 0, 0, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .lightbox[open] { animation: pop .35s var(--ease); } .lightbox[open]::backdrop { animation: fade .35s ease; } @keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } } @keyframes fade { from { opacity: 0; } } .lb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; max-height: calc(100dvh - 56px); overflow: hidden; } .lb-stage-wrap { display: flex; flex-direction: column; min-width: 0; background: #040405; } .lb-stage { position: relative; flex: 1; display: grid; place-items: center; min-height: 0; aspect-ratio: 4 / 3; max-height: calc(100dvh - 160px); overflow: hidden; touch-action: pan-y; } .lb-media { position: absolute; inset: 0; display: grid; place-items: center; } .lb-stage img, .lb-stage video { width: 100%; height: 100%; object-fit: contain; } .lb-stage iframe { width: 100%; height: 100%; border: 0; } .lb-stage img { animation: fade .3s ease; } .lb-arrow { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 48px; height: 44px; transform: skewX(var(--skew)); border: 2px solid transparent; border-image: var(--btn-border) 1; background: rgba(8, 10, 14, .85); color: #fff; } .lb-arrow:hover { background: var(--red-fill); } .lb-arrow svg { width: 22px; height: 22px; transform: skewX(calc(var(--skew) * -1)); } .lb-arrow--prev { left: 18px; } .lb-arrow--next { right: 18px; } .lb-thumbs { display: flex; gap: 10px; padding: 12px; overflow-x: auto; scrollbar-width: thin; } .lb-thumb { flex: none; width: 80px; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border: 2px solid rgba(255, 255, 255, .12); background: #111318; opacity: .6; transition: opacity .2s, border-color .2s, box-shadow .2s; } .lb-thumb img { width: 100%; height: 100%; object-fit: cover; } .lb-thumb:hover { opacity: 1; } .lb-thumb[aria-current="true"] { opacity: 1; border-color: var(--red); box-shadow: 0 0 14px -2px rgba(255, 34, 51, .8); } .lb-thumb--media { display: grid; place-items: center; gap: 2px; color: var(--text); font-family: var(--font-head); font-weight: 800; font-size: 13px; text-transform: uppercase; } .lb-thumb--media svg { width: 20px; height: 20px; color: var(--red); } .lb-info { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 30px 28px 24px; overflow-y: auto; border-left: 2px solid rgba(31, 157, 255, .35); } .lb-info h2 { font-family: var(--font-label); font-weight: 400; font-size: clamp(38px, 3.6vw, 50px); line-height: 1; padding-right: 44px; } .lb-info p { color: var(--text-dim); } .lb-info .eyebrow { /* smaller, so long category names fit the 340px panel */ --s: calc(var(--k) * .7); min-width: 0; max-width: calc(100% - 44px); margin: 4px 0 0 calc(30 * var(--s)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-details { display: grid; gap: 0; margin: 0; align-self: stretch; } .lb-details div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; } .lb-details dt { color: var(--text-mute); } .lb-details dd { margin: 0; font-weight: 700; text-align: right; } .lb-order { margin-left: 6px; } .lb-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; align-self: stretch; margin-top: auto; padding: 8px 6px 0; } .lb-count { font-family: var(--font-label); font-style: italic; font-size: 22px; white-space: nowrap; color: var(--text-mute); } .lb-close { position: absolute; top: 24px; right: 24px; z-index: 2; width: 42px; height: 42px; border: 2px solid rgba(255, 255, 255, .2); background: rgba(6, 7, 10, .9); } .lb-close:hover { border-color: var(--red); background: var(--red-fill); filter: none; } @media (max-width: 900px) { .lightbox { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; padding: 0; border-image: none; background: #08090c; overflow: hidden; } .lb-layout { grid-template-columns: 1fr; max-height: 100dvh; height: 100dvh; overflow-y: auto; } .lb-stage { aspect-ratio: 4 / 3; max-height: 62dvh; } .lb-info { border-left: 0; border-top: 2px solid rgba(31, 157, 255, .35); overflow: visible; } .lb-arrow { width: 42px; height: 40px; } } /* ============================================================================= 9. PRICING ============================================================================= */ .popular { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-bottom: clamp(48px, 7vw, 80px); } .price-card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 30px 28px 28px; } .price-card .badge { margin-left: 6px; color: #fff; background: rgba(255, 34, 51, .2); border: 1px solid rgba(255, 34, 51, .6); } .price-card:nth-child(even) .badge { background: rgba(31, 157, 255, .2); border-color: rgba(31, 157, 255, .6); } .price-card .badge::before { animation: none; } .price-card h3 { font-family: var(--font-label); font-weight: 400; font-size: 40px; line-height: 1; } .price-card p { flex: 1 0 auto; color: var(--text-dim); font-size: 16px; } /* grows so prices line up */ .price-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; align-self: stretch; padding: 16px 0; border-block: 1px solid var(--line); } .price-big .from { width: 100%; font-family: var(--font-head); font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); } .price-big .usd { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 54px; line-height: 1; padding-right: .1em; background: var(--red-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: .03em transparent; /* fatter, like the headlines */ filter: drop-shadow(0 0 14px rgba(255, 34, 51, .45)); } .price-big .rbx { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--text-dim); } .checklist { display: grid; gap: 10px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 15px; } .checklist li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-dim); } .checklist svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--red); } .price-card .btn { margin: auto 0 0 6px; align-self: stretch; } /* "All services" heading above the groups */ .price-intro { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 22px; } .price-intro .h2 { font-size: clamp(32px, 4.4vw, 52px); } .price-intro p { margin: 0; font-size: 15px; color: var(--text-mute); max-width: 52ch; } /* One card per group (Weapons, Assets, …) */ .price-groups { display: grid; gap: 26px; } .price-group { padding: var(--inset); } .pg-head { display: flex; align-items: center; gap: 16px; padding: 18px 26px 16px; background: linear-gradient(90deg, rgba(255, 34, 51, .26), rgba(255, 34, 51, .04) 60%, transparent); border-bottom: 2px solid rgba(255, 34, 51, .6); } .price-group:nth-child(even) .pg-head { background: linear-gradient(90deg, rgba(31, 157, 255, .26), rgba(31, 157, 255, .04) 60%, transparent); border-bottom-color: rgba(31, 157, 255, .6); } .pg-icon { display: grid; place-items: center; width: 50px; height: 42px; flex: none; transform: skewX(var(--skew)); border: 2px solid var(--red); background: rgba(255, 34, 51, .15); box-shadow: 0 0 14px -3px rgba(255, 34, 51, .9); } .price-group:nth-child(even) .pg-icon { border-color: var(--blue); background: rgba(31, 157, 255, .15); box-shadow: 0 0 14px -3px rgba(31, 157, 255, .9); } .pg-icon svg { width: 22px; height: 22px; transform: skewX(calc(var(--skew) * -1)); } .pg-title { font-size: clamp(26px, 3vw, 36px); } .pg-count { margin-left: auto; font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); } .price-table { width: 100%; border-collapse: collapse; table-layout: fixed; } /* same column widths in every group card, so the prices line up */ .price-table thead th:nth-child(1) { width: 26%; } .price-table thead th:nth-child(3) { width: 15%; } .price-table thead th:nth-child(4) { width: 18%; } .price-table thead th:nth-child(5) { width: 118px; } .price-table th, .price-table td { padding: 18px 26px; text-align: left; vertical-align: middle; } .price-table thead th { padding-block: 12px; font-family: var(--font-head); font-size: 14px; font-weight: 700; font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); border-bottom: 1px solid var(--line); } .price-table tbody tr { border-bottom: 1px solid var(--line); transition: background-color .25s; } .price-table tbody tr:last-child { border-bottom: 0; } .price-table tbody tr:hover { background: rgba(255, 34, 51, .07); } .price-table .svc { font-family: var(--font-label); font-style: italic; font-weight: 400; font-size: 28px; line-height: 1.05; text-transform: uppercase; } .price-table .desc { color: var(--text-dim); font-size: 15px; } .price-table .num { font-family: var(--font-label); font-style: italic; font-weight: 400; font-size: 27px; white-space: nowrap; font-variant-numeric: tabular-nums; } .price-table .num.usd { color: var(--red-hi); } .price-table .act { text-align: right; width: 1%; } /* Table → stacked rows on phones and small tablets */ @media (max-width: 1000px) { .price-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .price-table, .price-table tbody, .price-table tr, .price-table td, .price-table th { display: block; width: 100%; } .price-table tbody tr { padding: 18px 20px 20px; } .price-table td { padding: 0; } .price-table .svc { width: 100%; padding: 0; margin-bottom: 6px; } .price-table .desc { margin-bottom: 14px; } .price-table .num { display: inline-block; width: auto; margin: 0 24px 14px 0; } .price-table .num::before { content: attr(data-label); display: block; font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); } .price-table .act { text-align: left; width: 100%; padding-left: 0; overflow: visible; } .price-table .act .btn { margin-left: 0; transform: none; } .pg-head { padding: 16px 20px 14px; } } .notes { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); margin-top: 32px; } .note { padding: 22px 22px 22px 24px; border-left: 4px solid var(--red); background: linear-gradient(90deg, rgba(255, 34, 51, .1), rgba(12, 13, 17, .82)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); } .note:nth-child(even) { border-left-color: var(--blue); background: linear-gradient(90deg, rgba(31, 157, 255, .08), rgba(14, 16, 20, .9)); } .note-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .note-head svg { width: 22px; height: 22px; color: var(--red); flex: none; } .note:nth-child(even) .note-head svg { color: var(--blue); } .note h3 { font-family: var(--font-label); font-weight: 400; font-size: 27px; } .note p { font-size: 15px; color: var(--text-dim); } /* ============================================================================= 10. CONTRIBUTED GAMES ============================================================================= */ .game-feature { display: grid; padding: var(--inset); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); margin-bottom: 28px; } .game-feature .media { min-height: 380px; } .game-feature .feature-body { justify-content: center; } .game-feature .h3 { font-family: var(--font-label); font-weight: 400; font-size: clamp(44px, 5vw, 72px); line-height: .95; } @media (max-width: 860px) { .game-feature { grid-template-columns: 1fr; } .game-feature .media { min-height: 0; aspect-ratio: 16 / 9; } } .totals { margin-bottom: 36px; } .game-grid { display: grid; gap: 44px 26px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); } .game { display: flex; flex-direction: column; padding: var(--inset); } .game .media { aspect-ratio: 16 / 9; } .game-body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; flex: 1; padding: 20px 22px 22px; } .game-body h3 { font-family: var(--font-label); font-weight: 400; font-size: 34px; line-height: 1; } .game-body .mini-stats { gap: 12px; padding-top: 14px; align-self: stretch; } .game-body .mini-stats .stat-value { font-size: 24px; } .game-body .btn { margin: auto 0 0 6px; } .featured-flag { position: absolute; top: 30px; left: 34px; z-index: 2; } .featured-flag .badge { color: #fff; background: var(--red-fill); border: 1px solid #ffb0b6; box-shadow: 0 0 16px -2px rgba(255, 34, 51, .9); } .featured-flag .badge::before { animation: none; background: #fff; box-shadow: none; } /* ============================================================================= 11. CONTACT ============================================================================= */ .contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: start; } @media (max-width: 900px) { .contact { grid-template-columns: 1fr; } } .form-card { padding: clamp(26px, 4vw, 44px); } .form { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; } .form-card--disabled { position: relative; min-height: 560px; overflow: hidden; } .form-card--disabled .form { opacity: .34; filter: grayscale(.9) contrast(.78); user-select: none; pointer-events: none; } .form-disabled-overlay { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 32px; background: rgba(92, 96, 104, .18); backdrop-filter: grayscale(1) brightness(.7); -webkit-backdrop-filter: grayscale(1) brightness(.7); text-align: center; } .form-disabled-overlay p { max-width: 11ch; margin: 0; padding: 18px 24px 16px; font-family: var(--font-label); font-style: italic; font-size: clamp(34px, 5vw, 64px); line-height: .95; letter-spacing: .035em; text-transform: uppercase; color: #fff; background: rgba(8, 9, 12, .88); border-block: 2px solid rgba(255, 255, 255, .72); box-shadow: 0 12px 40px rgba(0, 0, 0, .65); text-shadow: 0 2px 0 #000; } .field { display: grid; gap: 8px; min-width: 0; } .field--full { grid-column: 1 / -1; } @media (max-width: 600px) { .form { grid-template-columns: 1fr; } } .field label { font-family: var(--font-head); font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); } .field .opt { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-mute); } .input { width: 100%; min-height: 52px; padding: 13px 16px; border-radius: var(--radius-sm); border: 1px solid rgba(31, 157, 255, .4); background: rgba(5, 6, 9, .85); color: var(--text); transition: border-color .25s, box-shadow .25s; } .input::placeholder { color: #777d88; } .input:hover { border-color: rgba(31, 157, 255, .6); } .input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 0 18px -4px rgba(255, 34, 51, .8); } textarea.input { min-height: 160px; resize: vertical; } select.input { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff2233' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 18px; } select.input option, select.input optgroup { background: #111318; } .input[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); } .error { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--error); } .error::before { content: "!"; display: grid; place-items: center; flex: none; width: 18px; height: 18px; background: var(--error); color: #000; font-size: 12px; font-weight: 900; } .error:empty { display: none; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding-left: 6px; } .form-hint { font-size: 14px; color: var(--text-mute); } .form-status { display: none; padding: 16px 18px; font-weight: 600; border-left: 4px solid currentColor; } .form-status.is-busy { display: block; color: var(--text-dim); background: rgba(255, 255, 255, .04); } .form-status.is-ok { display: block; color: var(--open); background: rgba(54, 227, 140, .08); } .form-status.is-err { display: block; color: var(--error); background: rgba(255, 92, 103, .08); } .side { display: grid; gap: 22px; } .status-card { padding: 26px 26px 24px; } .status-card .badge { margin: 0 0 14px 4px; font-size: 15px; } .status-card p { color: var(--text-dim); } .status-card .reply { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-weight: 600; color: var(--text); } .status-card .reply svg { width: 20px; height: 20px; color: var(--red); flex: none; } .links-card { padding: 12px; } .links-card h2 { padding: 14px 16px 8px; font-size: 16px; letter-spacing: .08em; color: var(--text-mute); } .direct { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-left: 3px solid transparent; text-decoration: none; transition: background-color .25s, border-color .25s; } button.direct { width: 100%; border: 0; border-left: 3px solid transparent; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .direct:hover, .direct:focus-visible { background: rgba(255, 34, 51, .1); border-left-color: var(--red); } .direct-icon { display: grid; place-items: center; width: 48px; height: 42px; flex: none; transform: skewX(var(--skew)); border: 2px solid rgba(31, 157, 255, .55); background: rgba(31, 157, 255, .08); color: #fff; } .direct-icon svg { width: 22px; height: 22px; transform: skewX(calc(var(--skew) * -1)); } .direct-text { display: grid; min-width: 0; line-height: 1.3; } .direct-text strong { font-family: var(--font-label); font-size: 24px; font-weight: 400; font-style: italic; text-transform: uppercase; line-height: 1.1; } .direct-text span { font-size: 15px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .direct-go { margin-left: auto; width: 18px; height: 18px; color: var(--text-mute); flex: none; transition: transform .25s var(--ease), color .25s; } .direct:hover .direct-go { transform: translateX(3px); color: var(--red); } .copy-row { display: flex; gap: 8px; padding: 6px 16px 14px 22px; } .copy-row .btn { flex: 1; } /* ============================================================================= 12. CTA BAND + FOOTER ============================================================================= */ .cta-band { padding-block: clamp(40px, 7vw, 90px) clamp(56px, 8vw, 100px); } .cta-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px 48px; padding: clamp(36px, 6vw, 72px); } .cta-title { font-size: clamp(46px, calc(112 * var(--u)), 130px); line-height: .95; } .cta-box p { margin-top: 16px; color: var(--text-dim); max-width: 52ch; } @media (max-width: 760px) { .cta-box { grid-template-columns: 1fr; } } .site-footer { position: relative; padding: 56px 0 34px; background: linear-gradient(rgba(6, 7, 10, .9), rgba(4, 5, 7, .97)); } .site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--red), var(--red) 40%, var(--blue)); box-shadow: 0 0 16px rgba(255, 34, 51, .7); } .footer-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } .footer-brand .logo img { width: auto; height: 104px; margin-left: -14px; } .footer-brand p { margin-top: 16px; color: var(--text-dim); max-width: 34ch; font-size: 15px; } .footer-col h2 { margin-bottom: 16px; font-family: var(--font-label); font-weight: 400; font-size: 26px; letter-spacing: .04em; color: var(--red-hi); } .footer-links { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .footer-links a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-dim); font-weight: 600; transition: color .2s; } .footer-links a:hover { color: #fff; } .footer-links a[aria-current="page"] { color: var(--red-hi); } .footer-links svg { width: 17px; height: 17px; } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-mute); } .to-top { background: none; border: 0; padding: 0; color: var(--text-mute); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .to-top:hover { color: #fff; } @media (max-width: 760px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } /* Friendly message if a content file has a typo */ .load-error { margin: 24px auto; max-width: 720px; padding: 18px 22px; border-left: 4px solid var(--error); background: rgba(255, 92, 103, .1); color: var(--text); } .load-error code { color: #fff; } /* ============================================================================= 13. ADMIN — commissions dashboard (admin.html) ============================================================================= */ .admin-page .wrap { max-width: calc(1440px + var(--gutter) * 2); } .admin-top { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; padding: 28px 0 22px; } .admin-top .logo img { width: auto; height: 76px; } .admin-top h1 { font-family: var(--font-label); font-weight: 400; font-size: 40px; } .admin-top .spacer { flex: 1; } .admin-user { font-size: 14px; color: var(--text-mute); } .admin-banner { margin-bottom: 22px; padding: 16px 20px; border-left: 4px solid var(--blue); background: rgba(31, 157, 255, .08); color: var(--text-dim); } .admin-banner strong { color: #fff; } .admin-banner ol { margin: 10px 0 0; padding-left: 22px; } .admin-banner code { color: #fff; background: rgba(255, 255, 255, .06); padding: 1px 6px; } .login-card { max-width: 460px; margin: 8vh auto; padding: 34px; display: grid; gap: 18px; } .login-card h1 { font-family: var(--font-label); font-weight: 400; font-size: 46px; } .login-card .eyebrow, .login-card .text-link { justify-self: start; } .order-panel .empty svg { width: 34px; height: 34px; color: var(--red); margin-bottom: 6px; } .admin-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr) minmax(0, 420px); gap: 22px; align-items: start; padding-bottom: 60px; } .admin-side { padding: 22px 18px 26px; display: grid; gap: 8px; position: sticky; top: 16px; } .admin-side h2 { font-size: 16px; color: var(--text-mute); padding: 4px 8px 8px; } .status-filter { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 14px; border: 0; border-left: 3px solid transparent; background: none; color: var(--text-dim); font-family: var(--font-head); font-weight: 800; font-size: 18px; text-transform: uppercase; text-align: left; } .status-filter:hover { color: #fff; background: rgba(255, 255, 255, .04); } .status-filter[aria-pressed="true"] { color: #fff; border-left-color: var(--red); background: rgba(255, 34, 51, .14); } .status-filter .n { min-width: 30px; padding: 0 8px; text-align: center; font-size: 15px; transform: skewX(var(--skew)); background: rgba(255, 255, 255, .08); } .status-filter[aria-pressed="true"] .n { background: var(--red); } .order-list { display: grid; gap: 30px; } .order { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 18px 24px; text-align: left; background: none; color: inherit; cursor: pointer; } .order[aria-current="true"] { filter: brightness(1.25) drop-shadow(0 0 12px rgba(255, 34, 51, .55)); } .order-title { font-family: var(--font-label); font-style: italic; font-weight: 400; font-size: 27px; text-transform: uppercase; } .order-sub { grid-column: 1 / -1; font-size: 15px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .order-when { font-size: 13px; color: var(--text-mute); white-space: nowrap; } .order .pill { justify-self: start; } .order.is-new .order-title::after { content: "NEW"; margin-left: 10px; padding: 1px 8px; font-size: 13px; background: var(--red); display: inline-block; transform: skewX(var(--skew)); } .pill { display: inline-block; padding: 2px 10px; transform: skewX(var(--skew)); font-family: var(--font-head); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; border: 1px solid currentColor; } .pill--new { color: var(--red-hi); background: rgba(255, 34, 51, .12); } .pill--accepted { color: var(--blue-hi); background: rgba(31, 157, 255, .12); } .pill--in_progress { color: #ffc34d; background: rgba(255, 195, 77, .1); } .pill--done { color: var(--open); background: rgba(54, 227, 140, .1); } .pill--declined { color: var(--text-mute); background: rgba(255, 255, 255, .05); } .order-panel { padding: 30px 28px; position: sticky; top: 16px; display: grid; gap: 16px; } .order-panel h2 { font-family: var(--font-label); font-weight: 400; font-size: 40px; } .order-panel dl { margin: 0; display: grid; gap: 0; } .order-panel dl div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; } .order-panel dt { color: var(--text-mute); font-family: var(--font-head); font-weight: 700; text-transform: uppercase; } .order-panel dd { margin: 0; overflow-wrap: anywhere; } .order-msg { white-space: pre-wrap; color: var(--text-dim); background: rgba(255, 255, 255, .03); border-left: 3px solid var(--blue); padding: 14px 16px; } .order-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-left: 6px; } .order-panel .empty { border: 0; padding: 30px 0; } @media (max-width: 1180px) { .admin-layout { grid-template-columns: 200px minmax(0, 1fr); } .order-panel { grid-column: 1 / -1; position: static; } .admin-side { position: static; } /* the details sit below now, so the sidebar mustn't stick over them */ } @media (max-width: 720px) { .admin-layout { grid-template-columns: 1fr; } .admin-side { position: static; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .admin-side h2 { grid-column: 1 / -1; } } /* ============================================================================= 14. MOTION ============================================================================= */ /* Scroll reveals — only hidden when JS is running, so the site still works without it. Uses `translate` so hover `transform`s don't fight it. */ .js .reveal { opacity: 0; } .reveal.is-in { animation: rise .8s var(--ease) var(--d, 0s) both; } @keyframes rise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } } /* Page transitions: fade in on load, fade out before following a link */ main, .cta-band, .site-footer { animation: page-in .6s var(--ease) backwards; } @keyframes page-in { from { opacity: 0; translate: 0 12px; } } body.is-leaving main, body.is-leaving .cta-band, body.is-leaving .site-footer { opacity: 0; translate: 0 -8px; transition: opacity .22s ease, translate .22s ease; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; } .embers { display: none; } .js .reveal { opacity: 1; } }