/* * 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); } .button { display: inline-block; padding: var(--ta-space-s) var(--ta-space-m); border-radius: var(--ta-radius-m); background: var(--ta-color-primary); color: var(--ta-color-primary-text); text-decoration: none; } .button:hover { background: var(--ta-color-primary-hover); } .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); } /* * 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); } /* * "Brug min nuværende position", under the address field. * * It is a real button and has to look like one: as a Lumo tertiary it rendered as bare * text, which read as a link and gave no sign it could be pressed - and this is the one * control on the form that saves a member typing anything at all. * * Pulled up against the field it belongs to, and left-aligned with it, so it reads as part * of the address question rather than as the next question. */ .ta-profile__locate { margin-top: calc(var(--lumo-space-xs) * -1); margin-bottom: var(--lumo-space-m); align-self: flex-start; } /* * 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; } /* The second way in, below the divider. A link, because it leaves the application. */ .ta-signed-out__alternative { display: block; text-align: center; padding: var(--lumo-space-s); border: 1px solid var(--ta-color-border); border-radius: var(--ta-radius-m); color: var(--ta-color-primary); text-decoration: none; } .ta-signed-out__links { justify-content: space-between; margin-top: var(--ta-space-m); font-size: var(--ta-font-size-s); } /* Leaves the page rather than doing something on it - see ProfileView. */ .ta-profile__elsewhere { display: inline-block; margin-top: var(--ta-space-m); color: var(--ta-color-primary); }