/* * The scene shell: a full-bleed landscape, a brand mark, and one translucent card centred in the * viewport. * * Shared by the five authentication pages (AuthTemplate) and the four error pages (ErrorTemplate). * Split out of yeti-auth.css when the error pages wanted the shell without the sign-in form - the * same split, one level in, that produced yeti-scene.css when the contact page wanted the artwork * without the card. The landscape itself is still in that sheet, not this one. * * Scoped to .scene-shell, which SceneShellTemplate writes to . AuthTemplate appends * .auth-page and ErrorTemplate appends .error-page; the sheets for those two carry what is specific * to a form or to a status numeral, and nothing that both need. * * Contributed by SceneShellTemplate. Its dependency chain is Tabler, then the application's shared * corrections, then the public marketing shell (which owns .app and .app-body), then this. */ .scene-shell { /* * Card tokens. Barely-warm rather than pure white: the scenes run from mint and slate blue to * orange and rose, so the face has to sit on all of them. A strongly warm card belongs to the * sunset scenes and looks stained on the cool ones, and pure white belongs to neither - it reads * as a panel pasted over the picture rather than lit by it. */ --yeti-shell-face: rgba(253, 249, 245, .91); --yeti-shell-edge: rgba(255, 255, 255, .55); --yeti-shell-ink: #1a2434; --yeti-shell-muted: #5c6b7e; /* Light type, read against the pill the legend lines sit on rather than against the artwork. */ --yeti-shell-legend: rgba(255, 243, 232, .94); --yeti-shell-legend-dim: rgba(255, 238, 224, .72); } /* * The shell fills the viewport and centres its card. .app already supplies the column flexbox and * the 100vh floor; these three carry the growth down to the shell, which the public marketing * pages never needed because their content is top-aligned. */ .scene-shell .app-body, .scene-shell .content, .scene-shell .content-container { display: flex; flex: 1 1 auto; min-width: 0; } .scene-shell .content-container { padding: 0 !important; } .auth-shell { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; padding: 3rem 1rem 2.5rem; } /* Brand mark above the card, and the visitor's way back to the public site. */ .auth-brand { display: inline-flex; align-items: center; border-radius: .75rem; padding: .25rem .5rem; transition: opacity .15s ease-in-out; } .auth-brand:hover, .auth-brand:focus-visible { opacity: .82; } .auth-brand img { width: auto; height: 4.5rem; } /* Card ------------------------------------------------------------------ */ .auth-card { width: 100%; max-width: 27rem; border: 1px solid var(--yeti-shell-edge); border-radius: 1.25rem; background-color: var(--yeti-shell-face); background-clip: padding-box; /* * saturate() alongside the blur, because blurring a dark backdrop through a light face turns * it grey; pulling the saturation back up is what keeps the desert colour in the glass. */ backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 2px 6px rgba(8, 12, 22, .18), 0 28px 56px -16px rgba(6, 10, 20, .62); color: var(--yeti-shell-ink); } /* * Card is a Border, so its own .card-body is the padding box. The header slot is unused on every * page that uses this shell: the heading sits in the body with its subtitle, which is one type * block instead of a title bar and a body that repeat each other. */ .auth-card > .card-body { padding: 2rem 2rem 1.75rem; } .auth-heading { margin-bottom: 1.5rem; text-align: center; } .auth-heading h1 { margin-bottom: .35rem; color: var(--yeti-shell-ink); font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; } .auth-heading p { margin-bottom: 0; color: var(--yeti-shell-muted); font-size: .875rem; line-height: 1.5; } /* Legend under the card ------------------------------------------------- */ /* * Both lines below the card sit on a translucent pill rather than straight on the artwork. * * A text shadow was not enough and could not be: the card is centred, so what ends up behind these * lines is whatever part of the scene the viewport height happens to put there, across six scenes * that share no palette - a lit horizon on one, near-black forest on the next. Light type is * unreadable on the first, dark type on the second. The pill decides the backdrop instead of * inheriting it, so the contrast is fixed at every viewport rather than at the one it was checked on. */ .auth-legend, .auth-footnote { max-width: 27rem; border-radius: 999px; padding: .375rem 1rem; background-color: rgba(12, 16, 36, .42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-align: center; } .auth-legend { color: var(--yeti-shell-legend); font-size: .875rem; } /* * Both links under the card are the same kind of thing - a quiet way out of this page - so they get * the same quiet treatment: the sentence's own colour and weight, with an underline to mark the * link. Amber and semibold made "Create an account" the brightest thing on the screen after the * submit button, which is the opposite of the ranking intended: signing in is the action, creating * an account is the aside. * * They are plain anchors. The pages used to give them ButtonBehavior(LINK), which meant undoing a * button's colour, padding and border here to get a link back; dropping the behaviour and putting * the label in the markup was the shorter way round. */ .auth-legend a, .auth-footnote a { color: inherit; font-weight: inherit; text-decoration: underline; text-underline-offset: 2px; } .auth-legend a:hover, .auth-footnote a:hover { color: #fff; } .auth-footnote { /* Tighter than the shell's gap: these two lines are one block, not two sections. */ margin-top: -.75rem; color: var(--yeti-shell-legend-dim); font-size: .75rem; } /* Dark ------------------------------------------------------------------ */ :root[data-bs-theme="dark"] .scene-shell { --yeti-shell-face: rgba(24, 34, 50, .84); --yeti-shell-edge: rgba(255, 255, 255, .14); --yeti-shell-ink: #eaf0f6; --yeti-shell-muted: #9db0c4; } /* Small screens --------------------------------------------------------- */ @media (max-width: 575.98px) { .auth-shell { padding: 2rem .875rem 2rem; gap: 1.125rem; } .auth-card { border-radius: 1rem; } .auth-card > .card-body { padding: 1.5rem 1.25rem 1.375rem; } .auth-brand img { height: 2.5rem; } } /* * backdrop-filter is the whole reason the face can be translucent. Where it is unsupported the * blur silently does nothing and the card would show the raw landscape through it, so the face * goes opaque instead. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .scene-shell { --yeti-shell-face: #fbf7f3; } .auth-legend, .auth-footnote { background-color: rgba(12, 16, 36, .66); } :root[data-bs-theme="dark"] .scene-shell { --yeti-shell-face: #182232; } }