/* type3 subdomain (type3.aiquniq.com) — page-level styles. * * Scaffold. The tab panels currently render a banner, a placeholder section and * the offer form; everything they eventually grow goes here, in the same slots * pages/software/flock/main.css uses for FLoCK. * * Structural styles this page relies on already live in shared sheets and are * linked ahead of this one by pages/type3/index.blade.php — do NOT redeclare them: * .tab-content / .tab-content.active main.css (tab shell only — the * landing and SAO pages have no panels) * .banner / .banner-text / .blend elements/banner.css * .offer-form-* (the whole form) wireframes/landing.css * * .structure / .inner are the exception: they are flock's .light / .inner, which * flock defines in its own sheet and no sheet type3 loads defines at all, so * they live below rather than being inherited from anywhere. */ /* ── reCAPTCHA badge ───────────────────────────────────────────────────────── * * Google pins its badge to the viewport corner for the life of the page. Hidden * by default; addons/type3.js puts .captcha-visible on while an offer * form is on screen, which is the only time the badge's notice is required. */ .grecaptcha-badge { visibility: hidden !important; z-index: 9999 !important; } body.captcha-visible .grecaptcha-badge { visibility: visible !important; z-index: 9999 !important; } /* ── Content sections ──────────────────────────────────────────────────────── * * flock's .light / .inner, same numbers. A full-bleed .structure carries the * vertical rhythm and the side gutter; a centred .inner inside it holds the * measure, so the text stops at a readable width on a wide screen while the band * itself still runs edge to edge. * * No typography here, deliberately: flock's bands set no font-size, no margins * and no line-height on their h1/h2/p, and neither does this. The copy is styled * once, globally, by main.css. A type scale here is what would make the two * subdomains drift apart. * * Not carried over from flock: there, .light also paints itself white and forces * its h1/p to black, which is what makes those bands alternate against the dark * page. type3 keeps one ground throughout, so only the box model comes across. */ .structure { padding: 50px 10%; background-color: black; } /* Reads as a continuation of the band above rather than a new section: drops its * own top padding, leaving the 50px its predecessor already pays below as the * whole seam. Used by 'Mission Critical Assets'. */ .structure.tight { padding-top: 0; } .inner { max-width: 1200px; margin: 0 auto; font-weight: 400; } /* ── Artwork beside the copy ───────────────────────────────────────────────── * * flock's .deploy: a flex row that turns into a column at 1000px, flock's own * breakpoint for this pattern. * * Which side the artwork lands on is the order it is written in the blade — an * after the copy is on the right, before it is on the left. Same as flock, * where .docker before .inner puts the video on the left. No modifier class. */ .split { display: flex; flex-direction: row; align-items: center; gap: 5%; } /* The copy column. min-width: 0 as on flock's .docker — without it a flex item * refuses to shrink below its content and the row overflows the band. */ .split > div { flex: 1 1 auto; min-width: 0; } /* A trailing margin on the last paragraph would push the copy taller than the * artwork beside it. */ .split > div > *:last-child { margin-bottom: 0; } /* 14px corners on a 1px hairline is how flock's .console treats a surface on a * dark ground. The background holds the frame while a poster or clip decodes, so * the row does not jump once it paints. */ .split > video { display: block; height: auto; border-radius: 14px; background-color: #0a0a0a; } .split > img { display: block; height: auto; border-radius: 14px; background-color: #0a0a0a; } .w-30 { flex: 0 0 30%; width: 30%; } .w-40 { flex: 0 0 40%; width: 40%; } .w-60 { flex: 0 0 60%; width: 60%; } /* ── Status badge ──────────────────────────────────────────────────────────── * * Title and status on one line, wrapping to two when the title is long. The h2 * is deliberately not flex: 1, so a title too long to share the line wraps the * badge onto its own row instead of being squeezed. */ .asset-head { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; /* Stands in for the h2's own default margins, zeroed below so the badge is * not pushed off the heading's line. */ margin: 0 0 20px; } .asset-head h2 { margin: 0; } /* flock's .cat-field label — 11px, 700, uppercase, .06em — which is this site's * existing vocabulary for a small state label, on the 25px pill the tab already * used. Quiet on purpose: a hairline ring, a barely-there fill, and the dot * doing the signalling. * * The dot is positioned, not a flex item: a flex box takes its baseline from its * first item, and a dot has no text — its baseline is its bottom edge, which * drags the whole pill down wherever anything aligns to it. The left padding is * what reserves its room. */ .status { position: relative; display: inline-block; padding: 8px 18px 8px 34px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 25px; background-color: rgba(255, 255, 255, 0.08); color: #dfdfdf; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; } .status::before { content: ""; position: absolute; top: 50%; left: 18px; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background-color: #ffb020; } /* ── Divider ───────────────────────────────────────────────────────────────── * * Between two asset bands — under SERAPHIM, before the observer list. * * Full-bleed, fading out at both ends: that insets it optically instead of with * a width and a wrapper, so it never has to be kept in step with .inner's * measure or the band's 10% gutter, and it lines up at every viewport. * * The mark in the middle is what stops it reading as a stray hairline. A bare * 1px line on black is either invisible or, turned up until it is not, louder * than the headings it separates; the cluster carries the weight at one point * instead, so the line itself can stay quiet. Drop the ::before rule and it is * a plain rule again. * * No margins: it sits between two .structure bands, which already pay 50px below * and 50px above it. */ .divider { position: relative; height: 1px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.18) 25%, rgba(255, 255, 255, 0.18) 75%, rgba(255, 255, 255, 0)); } /* Five circles, scattered off the line rather than threaded onto it. * * One element paints all five: box-shadow repeats the element's own shape, the * offsets scatter the copies, and the SPREAD radius resizes each one — a 10px * circle at -3px spread paints as 4px, at +2px as 14px. So sizes and alphas vary * without five elements or five background layers, and the y offsets keep them * off a single axis so the group reads as a cluster rather than a row of beads. * * Tuning, per shadow: x is position along the line, y is drift off it, the * fourth value is size relative to width/height, and the alpha is depth. The * group is centred on the element, so keep the x offsets roughly balanced unless * the variant is meant to lean. */ .divider::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, 0.42); box-shadow: -52px 7px 0 -3px rgba(255, 255, 255, 0.20), -27px -6px 0 -1.5px rgba(255, 255, 255, 0.32), 26px 6px 0 -2.5px rgba(255, 255, 255, 0.26), 50px -5px 0 -1px rgba(255, 255, 255, 0.38); } /* Variants, so a page with several dividers does not print the same figure four * times. Each is its own arrangement, not a transform of the base — the centre * circle changes size too, which is what moves the visual weight around. * * .divider centred, largest in the middle * .divider.left leaning left * .divider.right leaning right, .left mirrored * .divider.wide strung further out, more even * * Add another by copying a block and moving the numbers; nothing else reads * these classes. */ .divider.left::before { width: 5px; height: 5px; background-color: rgba(255, 255, 255, 0.26); box-shadow: -66px 6px 0 -1px rgba(255, 255, 255, 0.18), -44px -7px 0 2.5px rgba(255, 255, 255, 0.40), -20px 7px 0 0 rgba(255, 255, 255, 0.30), 32px -5px 0 1px rgba(255, 255, 255, 0.22); } .divider.right::before { width: 5px; height: 5px; background-color: rgba(255, 255, 255, 0.26); box-shadow: 66px 6px 0 -1px rgba(255, 255, 255, 0.18), 44px -7px 0 2.5px rgba(255, 255, 255, 0.40), 20px 7px 0 0 rgba(255, 255, 255, 0.30), -32px -5px 0 1px rgba(255, 255, 255, 0.22); } .divider.wide::before { width: 7px; height: 7px; background-color: rgba(255, 255, 255, 0.34); box-shadow: -96px -6px 0 -2px rgba(255, 255, 255, 0.18), -54px 8px 0 0.5px rgba(255, 255, 255, 0.28), 55px -8px 0 -1px rgba(255, 255, 255, 0.24), 98px 6px 0 1.5px rgba(255, 255, 255, 0.36); } /* ── Responsive ────────────────────────────────────────────────────────────── * * 1000px, not the 768px the shared sheets use for the nav, banner and form: it * is flock's breakpoint for .deploy, and it is where two columns of this width * stop working rather than where the chrome changes. * * Stacked, the artwork sits wherever it was written — which is why the clip on * 'Why It Matters' comes before its copy and the asset image after its own. */ @media (max-width: 1200px) { .split { flex-direction: column; align-items: stretch; gap: 20px; } .split > img, .split > video { flex: 0 0 auto; width: 100%; } }