/* * Styles shared by the Thymeleaf pages and the Vaadin app. * * Values come from tokens.css - never a literal colour, size or font here. */ /* * The board has to be on , not only on . * * Lumo paints html with --lumo-base-color, which is mapped to the CARD surface so * that fields render on white. Left there, the page beyond the body's own box - the * strip that scrolls into view under a long form - came up white while the form sat * on the board. */ html { background: var(--ta-color-bg); } body { margin: 0; background: var(--ta-color-bg); color: var(--ta-color-text); font-family: var(--ta-font-family); font-size: var(--ta-font-size-m); line-height: var(--ta-line-height-body); } .page { max-width: var(--ta-content-max-width); margin: 0 auto; padding: var(--ta-space-l) var(--ta-space-m) var(--ta-space-xl); } .page h1 { font-size: var(--ta-font-size-xxl); line-height: var(--ta-line-height-tight); margin: 0 0 var(--ta-space-m); } .page h2 { font-size: var(--ta-font-size-l); line-height: var(--ta-line-height-tight); margin: var(--ta-space-l) 0 var(--ta-space-s); } .lede { font-size: var(--ta-font-size-l); color: var(--ta-color-text-secondary); } /* * The marketing pages' button. Marigold, because on a page with one thing to do the * affirmative colour is the whole point of having one - it was spruce, which made the * only action on the front page the same colour as every heading and link on it. * * The rule is at most one per screen region, not "only on sign-up": on a community * that is not open there is no sign-up, and then LOG IND is the one action and wears * it. landing.html decides which; this file only knows what the two look like. */ .button { display: inline-block; padding: var(--ta-space-s) var(--ta-space-m); border-radius: var(--ta-radius-m); border: 1px solid transparent; background: var(--ta-color-affirm); color: var(--ta-color-affirm-text); font-weight: 600; text-decoration: none; } .button:hover { background: var(--ta-color-affirm-hover); } /* * The other one. A button rather than a bare link, because a bare link beside a solid * button reads as an afterthought and is a poor target for a thumb - the same reason * the login page's Google button stopped being an anchor. */ .button--secondary { background: var(--ta-color-surface); border-color: var(--ta-color-border); color: var(--ta-color-primary); font-weight: 400; } .button--secondary:hover { background: var(--ta-color-surface); border-color: var(--ta-color-primary); } .site-footer { max-width: var(--ta-content-max-width); margin: 0 auto; padding: var(--ta-space-m); border-top: 1px solid var(--ta-color-border); color: var(--ta-color-text-secondary); font-size: var(--ta-font-size-s); } .site-footer a { color: inherit; margin-right: var(--ta-space-m); } /* * Profile editor. * * Deliberately minimal. The palette in tokens.css is still the placeholder set the * skeleton was stood up with, and UX_DESIGN.md's real direction (spruce, marigold, * rust; Familjen Grotesk over Source Serif 4) has not been turned into tokens yet. * Anything expressive written now would have to be rewritten then - so this does * layout and grouping only, entirely through tokens, and survives the swap. */ .ta-profile { padding: var(--ta-space-m); /* * Capped and centred. It was setMaxWidth("34rem") in Java, which is a design * decision the design system cannot see, cannot respond to a screen with, and was * a third measure alongside the marketing pages' 40rem and the account screen's * none-at-all. One member-facing form measure, from a token, here. */ max-width: var(--ta-form-max-width); margin: 0 auto; box-sizing: border-box; } /* * A heading INSIDE a section - two-factor, under the password it belongs to. * * Quieter than the section heading above it and louder than a label, because that is * exactly the relationship: two-factor is part of how the password works, not a peer of * it. Being a peer is what its own card used to say, and it is not true - no provider * sign-in ever consults it. */ .ta-profile__subsection { margin: var(--ta-space-l) 0 var(--ta-space-xs); font-size: var(--ta-font-size-m); font-weight: 600; } /* * The section headings split the form into what a member is like and how the app works * for them. They deliberately do NOT say who sees what: the two names have different * audiences, so no heading could be true for both, and each field states its own * visibility instead. Visually quieter than the page title, but never hidden. */ .ta-profile__section { margin: var(--ta-space-l) 0 0; font-size: var(--ta-font-size-m); color: var(--ta-color-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; } .ta-profile__welcome { color: var(--ta-color-text-secondary); } .ta-profile__save { margin-top: var(--ta-space-l); } /* * Member-written text. * * The serif is not a decorative choice and not "body copy" - it marks text a PERSON * typed, as against text the application did. An event description, a post, an * about-me. Applying it to the app's own labels and buttons would spend the * distinction and leave the serif meaning nothing. */ .ta-prose { font-family: var(--ta-font-family-prose); line-height: var(--ta-line-height-body); } /* * The same thing for a Vaadin field, and it needs its own class rather than reusing * .ta-prose on the host. A field is not a block of prose: it is a label the APP * wrote plus a value a MEMBER wrote, and the class has to land on only the second. * Putting .ta-prose on the host set the "Om mig" label in the serif - a heading * nobody typed - which inverts the exact distinction this is drawing. * * The control is slotted light DOM, so a descendant selector reaches it; the label * lives in the shadow root and is untouched. */ .ta-prose-field textarea, .ta-prose-field input { font-family: var(--ta-font-family-prose); line-height: var(--ta-line-height-body); } /* * A note pinned to the board. * * The page is the board and content sits on notes - cards being LIGHTER than the * page is what creates that read. A form rendered straight onto the board misses it * entirely and looks like an unstyled page, which is what the profile editor did * until 2026-08-17. */ .ta-card { background: var(--ta-color-surface); border-radius: var(--ta-radius-l); padding: var(--ta-space-m); box-shadow: 0 1px 3px rgba(27, 42, 36, 0.14), 0 6px 18px rgba(27, 42, 36, 0.08); } /* * Dates, counts, and #n references. Earned rather than decorative: #n is this app's * signature mechanic, and monospace is what makes a reference read as a reference * rather than as prose. */ .ta-numeric { font-family: var(--ta-font-family-mono); font-variant-numeric: tabular-nums; } /* * The affirmative button - the one action of a screen region. * * Marigold, with ink on it. Not white: white on marigold is 2.2:1 and fails, while * ink is 7.0:1 (tokens.css computes both). * * THE RULE THAT KEEPS THIS MEANINGFUL IS "AT MOST ONE PER SCREEN REGION", not "only * on sign-up". If a region has two competing actions, neither one gets this class and * both are plain primary buttons - the orange thing has to be unambiguous or it stops * being a signal at all. * * Implemented by rebinding Lumo's primary variables on this element rather than by * styling the button's insides: vaadin-button builds its own background from * --lumo-primary-color, so scoping that here reaches it without any knowledge of * Vaadin's shadow DOM. */ .ta-button-affirm { --lumo-primary-color: var(--ta-color-affirm); --lumo-primary-text-color: var(--ta-color-affirm-text); --lumo-primary-contrast-color: var(--ta-color-affirm-text); } /* * One address question, two answers. The location control used to sit below the input, * where a member had already begun typing before seeing it. It is now the first equal * choice and spans the same measure as the address field; the quiet bridge names typing * as the other choice instead of making either look like an afterthought. */ .ta-profile__address-question { gap: var(--ta-space-s); } .ta-profile__address-label { font-size: var(--lumo-font-size-s); font-weight: 500; line-height: var(--lumo-line-height-s); } .ta-profile__locate { width: 100%; margin: 0; } .ta-profile__address-alternative { align-self: center; color: var(--ta-color-text-secondary); font-size: var(--ta-font-size-s); margin: var(--ta-space-xs) 0; } /* * Said only when the address saved is not the address typed - a floor and door stripped * off, because the register holds buildings and we store nothing we do not measure a * distance with. Quiet: it is a receipt, not a warning, and the member did nothing wrong. */ .ta-profile__matched { margin-top: calc(var(--ta-space-s) * -1); margin-bottom: var(--ta-space-m); color: var(--ta-color-text-secondary); font-size: var(--ta-font-size-s); } /* * One suggestion: the building on top, where it is underneath. * * A list of "Skovvej 15, 2750 Ballerup" repeated down the page is read by its * differences, and on one long line those sit at both ends. Two lines put the varying * part where the eye already is, and give a finger on a phone something the height of two * lines to land on rather than the height of one. * * The chevron spans both rows on the right: it means this row leads somewhere rather than * finishing the job, which is the one thing about this field that used to need explaining * and now does not - in either language, without taking a line. */ .ta-address-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 var(--ta-space-s); width: 100%; line-height: var(--ta-line-height-tight); } .ta-address-row__what { grid-column: 1; } .ta-address-row__where { grid-column: 1; color: var(--ta-color-text-secondary); font-size: var(--ta-font-size-s); } .ta-address-row > vaadin-icon { grid-column: 2; grid-row: 1 / -1; width: var(--ta-font-size-s); height: var(--ta-font-size-s); color: var(--ta-color-text-secondary); } /* * The five signed-out pages: sign in, sign up, finish signing up, forgotten password, * new password. One note in the middle of the board with one thing to do on it. * * Narrow on purpose. A login form stretched across a laptop reads as an unfinished * page, and every one of these is two or three fields - the measure is what makes it * look deliberate rather than sparse. */ .ta-signed-out { padding: var(--ta-space-l) var(--ta-space-m); } .ta-signed-out__card { width: 100%; max-width: 26rem; } .ta-signed-out__heading { margin: 0 0 var(--ta-space-s); font-size: var(--ta-font-size-l); } .ta-signed-out__explanation { margin: 0 0 var(--ta-space-m); color: var(--ta-color-text-secondary); } /* * Rust on a note, which is the surface it is legible on - 4.2:1 against the board is * under the 4.5 body text needs, and these pages are the one place a member reads an * error carefully. */ .ta-signed-out__error { color: var(--ta-color-error); font-weight: 600; } /* * "eller fortsæt med" between the ways in. Two rules and a few words, with the same air * above as below - it separates equals, so a divider that sat closer to one of them * would be saying something about which one matters. * * It carries the verb the provider buttons gave up in order to fit beside each other. * That is also what makes a second "or" BETWEEN those two buttons unnecessary: this one * covers both of them, and repeating it at a smaller scale would put the same word on * the card three times. */ .ta-signed-out__divider { margin: var(--ta-space-l) 0; gap: var(--ta-space-s); align-items: center; color: var(--ta-color-text-secondary); font-size: var(--ta-font-size-s); } /* * A one-pixel box with a background, not a border on a taller one. An

keeps its * own height and draws the line along its TOP edge, so centring it in the row put the * rules a few pixels above the word between them - close enough to look like a * mistake and not close enough to name. */ .ta-signed-out__divider hr { flex: 1; align-self: center; height: 1px; margin: 0; border: 0; background: var(--ta-color-border); } /* * The card is three things - a password, another way in, and a choice about this * machine - and on a screen with room it should read as three. This is the first * thing given up when there is not room: a login form you have to scroll is worse * than one that sits close together. */ @media (max-height: 760px) { .ta-signed-out__divider { margin: var(--ta-space-m) 0; } } /* * The other ways in, below the divider: two buttons that share one row while the row * is wide enough for both, and become a column when it is not. * * flex-wrap and a basis, NOT a media query. What runs out of room is the card, which is * 26rem at most and narrower than that on a phone - the viewport is a proxy for it and * a poor one, and a proxy would have to be re-guessed the day the card changes width. * The basis is what decides: two buttons plus the gap need about 19rem, so they sit * side by side on any normal screen and stack on a small phone, with nothing to keep in * step. min-width:0 because a flex item will otherwise refuse to shrink below its * label, which is how a wrapping row silently becomes an overflowing one. */ .ta-signed-out__providers { flex-wrap: wrap; gap: var(--ta-space-s); } .ta-signed-out__providers vaadin-button { flex: 1 1 9rem; min-width: 0; } /* * The face of a provider button, wherever one appears - the login page offers them as * ways in, the account section as accounts to connect, and they are the same control on * the same two brands. * * The same shape as the sign-in button above, because they are answers to one question - * but not the same width, and not the same colour. Marigold is for the one thing this * page is for; these are the alternative, and two of them side by side under a divider * already say so without help. That is why they are vaadin-buttons rather than styled * anchors: an anchor had to reproduce the button's box and got it two pixels wrong, * which is exactly the sort of thing nobody can name and everybody notices. * * Their face is set through vaadin-button's OWN properties rather than by painting the * host: both the base styles and the Lumo layer read --vaadin-button-background, * --vaadin-button-text-color and the border hooks, so this reaches inside without any * knowledge of the shadow DOM and without borrowing a global token to do it. (Rebinding * --lumo-contrast-5pct here would also have worked, and would have been the thing * tokens.css warns against: the contrast scale is not a place to put named colours.) * * Two border hooks because the two layers spell it differently - --vaadin-button-border * in Lumo, --vaadin-button-border-color in the base styles. Each is inert where it is * not read. */ .ta-provider-button { --vaadin-button-background: var(--ta-color-surface); --vaadin-button-text-color: var(--ta-color-primary); --vaadin-button-border: 1px solid var(--ta-color-border); --vaadin-button-border-color: var(--ta-color-border); } /* * "Har du ikke en profil? Opret en" - a question under the field it is about, with the * answer clickable. Small and quiet: it is for the member this page turns away, not for * the one who is about to type their password. */ .ta-signed-out__field-helper { align-items: baseline; gap: 0.3em; color: var(--ta-color-text-secondary); font-size: var(--ta-font-size-s); } .ta-signed-out__field-helper vaadin-button { font-size: inherit; } /* * Remember this browser. Below both ways in, and separated from them by the same * labelled divider - "og" - that separates the two ways in from each other. It governs * everything above it, and a control tucked under the Google button reads as part of * the Google button. The word is what makes the sentence: sign in with a password OR * with Google, AND stay signed in here. */ .ta-signed-out__remember { width: 100%; } .ta-signed-out__remember-help { margin-top: var(--ta-space-xs); color: var(--ta-color-text-secondary); font-size: var(--ta-font-size-s); } /* * One connected account: mark, name, state, and the one thing to do about it. * * The state expands so every button lands on the same right-hand edge whatever the * words in front of it are - a column of Forbind/Afbryd buttons at ragged x-positions * is the sort of thing that reads as unfinished without anyone being able to say why. * The mark is set at the field-label size rather than the button's, because it is * identifying the row and not decorating a control. */ /* * One connected account: mark, brand and state on the left, the one action beside them. * * The action used to be pushed to the far right of the card, which on a page that ran * the whole width of a window put it far enough from the brand it belonged to that it * was missed altogether. The capped measure fixes most of that; what expands now is the * group it acts on, so the buttons still line up in a column and still sit near it. * * On a narrow screen the row wraps rather than squeezing the button off the edge. */ .ta-profile__connection { flex-wrap: wrap; padding: var(--ta-space-xs) 0; } .ta-profile__connection-what { gap: var(--ta-space-s); min-width: 0; } .ta-profile__connection-name { font-weight: 600; } .ta-profile__connection img { width: 18px; height: 18px; } /* * The two things at the foot of the profile that are not the profile: the way to the * password page, and the way out. Both leave the page rather than doing something on * it - see ProfileView. */ .ta-profile__elsewhere-row { margin-top: var(--ta-space-m); align-items: baseline; gap: var(--ta-space-m); } .ta-profile__elsewhere { display: inline-block; color: var(--ta-color-primary); font-size: var(--ta-font-size-m); /* * Signing out is a button because it does something rather than goes somewhere, and * it stood out for it: Lumo sets a button's weight to 500 against the anchor's 400, * which reads as darker and heavier. Two controls that do the same KIND of thing * should not differ over which HTML element they happen to be. */ --vaadin-button-font-weight: 400; --vaadin-button-text-color: var(--ta-color-primary); } /* Both underline, for the same reason: they leave the page. */ .ta-profile__elsewhere:hover { text-decoration: underline; } .ta-profile__elsewhere:hover::part(label) { text-decoration: underline; }