:root { --navy: #090038; --pink: #e5004f; --accent-red: #d40028; --text-body: rgba(255, 255, 255, 0.92); --text-muted: rgba(255, 255, 255, 0.55); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; } body { font-family: "Roboto", "Segoe UI", Arial, sans-serif; color: var(--text-body); background: linear-gradient(180deg, var(--navy) 0%, var(--pink) 100%); background-attachment: fixed; display: flex; flex-direction: column; min-height: 100vh; } h1, h2, .headline-font { font-family: "Singing Sans", "Baloo 2", "Segoe UI", Arial, sans-serif; /* Singing Sans's branded look (the swash caps/cursive lowercase seen throughout the type specimen, e.g. the "UNITED BY MUSIC" lockup) lives behind the "salt" (stylistic alternates) OpenType feature - browsers don't enable it by default, so without this the font renders its much plainer default glyph set instead. Confirmed live 2026-07-24: this was the actual cause of the client seeing "the wrong font" even though the correct file was loading correctly all along. Baloo 2 (the fallback) doesn't define this feature, so it's a harmless no-op if that's ever what's actually rendering. */ font-feature-settings: "salt" 1; } /* ---------- Header ---------- */ .site-header { background: var(--navy); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 0.9rem clamp(1rem, 4vw, 3rem); } .brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; } .brand img.heart { height: clamp(34px, 4vw, 44px); width: auto; } .brand img.ubm { height: clamp(20px, 2.6vw, 26px); width: auto; } .submission-badge { display: flex; justify-content: center; } .submission-badge .pill { background: #ffffff; border-radius: 14px; padding: 0.5rem 1.1rem 0.6rem; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; } .submission-badge .label { color: var(--accent-red); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; } .submission-badge .pill img { height: clamp(20px, 2.4vw, 26px); width: auto; } /* ---------- Main content ---------- */ main { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 6vw, 4rem) 1.5rem; } .content { max-width: 900px; width: 100%; text-align: center; } .content h1 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 700; line-height: 1.25; margin: 0 0 1.75rem; } .content p { font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.6; margin: 0 0 0.75rem; } .countdown { margin: 2.75rem 0 0.5rem; display: flex; justify-content: center; gap: clamp(0.75rem, 3vw, 2.5rem); flex-wrap: wrap; } .countdown .unit { min-width: 3.5rem; } .countdown .value { font-family: "Singing Sans", "Baloo 2", "Segoe UI", Arial, sans-serif; font-feature-settings: "salt" 1; font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 700; font-variant-numeric: tabular-nums; } .countdown .unit-label { font-style: italic; font-size: clamp(0.8rem, 1.4vw, 1rem); color: var(--text-body); margin-top: 0.15rem; } .countdown-done { margin: 2.75rem 0 0.5rem; font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 700; } .quote-block { margin-top: 3rem; } .quote-block blockquote { font-family: "Singing Sans", "Baloo 2", "Segoe UI", Arial, sans-serif; font-feature-settings: "salt" 1; font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.4rem); margin: 0 0 0.6rem; } .quote-block cite { font-style: normal; font-size: clamp(0.9rem, 1.4vw, 1rem); color: var(--text-body); } /* ---------- Share / rules cards ---------- */ /* Hidden by default and only revealed on eurovision-submission.ch, where resources/views/landing/index.blade.php renders .show-addons onto . That used to be an inline script sniffing location.hostname, and defaulting to hidden was how eurovision-selection.ch avoided flashing the boxes before the script ran. The server decides now, so there is no flash to avoid - but hidden-by-default is still the safer default of the two. */ .cards { display: none; } .show-addons .cards { margin-top: clamp(2rem, 5vw, 3rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); align-items: stretch; } .card { border: 2px solid #ffffff; border-radius: 18px; padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1rem, 2vw, 1.5rem); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; text-align: center; } .card-title { font-family: "Singing Sans", "Baloo 2", "Segoe UI", Arial, sans-serif; font-feature-settings: "salt" 1; font-weight: 700; font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.3; margin: 0; } .share-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(0.5rem, 1.4vw, 0.85rem); } .share-btn { --brand: #444; width: 44px; height: 44px; border-radius: 50%; background: var(--brand); display: flex; align-items: center; justify-content: center; color: #fff; transition: transform 0.15s ease, box-shadow 0.15s ease; } .share-btn svg { width: 22px; height: 22px; fill: currentColor; } .share-btn:hover, .share-btn:focus-visible { transform: translateY(-2px) scale(1.06); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3); } .share-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .share-btn.is-facebook { --brand: #1877f2; } .share-btn.is-x { --brand: #000000; } .share-btn.is-tiktok { --brand: #010101; } .share-btn.is-whatsapp { --brand: #25d366; } .share-btn.is-linkedin { --brand: #0a66c2; } /* Instagram has no flat brand colour - the mark is always the gradient. */ .share-btn.is-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); } .share-status { margin: 0; min-height: 1.1em; font-size: 0.8rem; color: var(--text-body); } .rules-card { text-decoration: none; color: #fff; gap: 0.25rem; transition: background-color 0.15s ease, transform 0.15s ease; } .rules-card:hover, .rules-card:focus-visible { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); } .rules-card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .card-sub { font-size: clamp(0.85rem, 1.4vw, 0.95rem); } /* ---------- Preview banner ---------- */ /* Only rendered on a signed preview of the thank-you page (App\Http\Controllers\ThankYouPreviewController). Deliberately plain - a flat amber strip in the body font, with none of the brand's gradients, display face or rounded panels - so that nobody reviewing the page below it can mistake it for part of the design. */ .preview-banner { background: #ffcf33; color: #24170a; text-align: center; padding: 0.5rem 1rem; font-size: 0.8rem; line-height: 1.4; } .preview-banner strong { text-transform: uppercase; letter-spacing: 0.06em; } /* ---------- Thank-you page ---------- */ /* resources/views/landing/thank-you.blade.php, served once the submission window closes (App\Http\Middleware\ServeThankYouAfterClose). Everything above is reused as-is - the gradient, the header, the display font, the share buttons, the footer - and only what the client's mock-up adds is defined here: the panels, the pull-quote and the two note cards. Scoped under .thanks so the placeholder page cannot be changed by accident from down here. */ .thanks { max-width: 760px; display: flex; flex-direction: column; gap: clamp(0.75rem, 1.6vw, 1rem); } /* The mock's dark cards: the gradient shows through, so they read as panels on the same background rather than as a second background colour. */ .thanks-panel { background: rgba(4, 0, 22, 0.72); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; padding: clamp(1.4rem, 3.5vw, 2.4rem) clamp(1.1rem, 3vw, 2.4rem); } .thanks-hero { /* The heart overlaps the top edge, as in the mock-up: the panel is pushed down by exactly what the heart is then pulled up by. One clamp() for both, because two would have to be kept equal by hand - and a negated clamp() cannot simply be written with negative bounds (min > max is invalid and collapses to the min). */ --hero-lift: clamp(1.6rem, 4vw, 2.4rem); margin-top: var(--hero-lift); padding-top: 0; } .thanks-hero-heart { height: clamp(54px, 8vw, 76px); width: auto; margin-top: calc(-1 * var(--hero-lift)); } .thanks h1 { font-size: clamp(1.7rem, 4.4vw, 2.6rem); font-weight: 700; line-height: 1.2; margin: 0.6rem 0 1.1rem; } .thanks h1 .accent { color: var(--pink); } .thanks-hero p { margin: 0 auto 0.45rem; max-width: 34em; } /* A hairline either side of a small heart - the mock's section break. */ .thanks-rule { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin: clamp(1.4rem, 3vw, 2rem) 0; } .thanks-rule-line { height: 1px; width: clamp(2rem, 8vw, 4.5rem); background: rgba(255, 255, 255, 0.22); } .thanks-rule-heart { width: 18px; height: 18px; fill: var(--pink); flex: none; } .thanks-quote { position: relative; margin: 0; border: 1px solid rgba(229, 0, 79, 0.85); border-radius: 14px; padding: clamp(1.5rem, 3.5vw, 2.1rem) clamp(2.2rem, 6vw, 3.4rem); } /* Decorative quote marks, top-left and bottom-right. Pseudo-elements rather than markup: they are punctuation the sentence already implies, and a screen reader announcing "left double quotation mark" twice helps nobody. */ .thanks-quote::before, .thanks-quote::after { position: absolute; color: var(--pink); font-family: "Roboto", "Segoe UI", Arial, sans-serif; font-size: clamp(2.2rem, 6vw, 3.2rem); font-weight: 700; line-height: 1; } .thanks-quote::before { content: "\201C"; top: clamp(0.9rem, 2.5vw, 1.4rem); left: clamp(0.6rem, 2vw, 1.1rem); } .thanks-quote::after { content: "\201D"; right: clamp(0.6rem, 2vw, 1.1rem); bottom: clamp(0.2rem, 1.5vw, 0.6rem); } .thanks-quote blockquote { font-family: "Singing Sans", "Baloo 2", "Segoe UI", Arial, sans-serif; font-feature-settings: "salt" 1; font-weight: 700; font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.35; margin: 0 0 1rem; } .thanks-quote figcaption { display: flex; flex-direction: column; gap: 0.15rem; font-size: clamp(0.85rem, 1.4vw, 0.95rem); } .thanks-quote-name { font-weight: 700; } .thanks-quote-role { color: var(--text-muted); } /* "See you next year!" and "Stay in touch": icon, text, and - on the second one - an action pushed to the far end on wide screens. */ .thanks-note { display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.75rem); text-align: left; } .thanks-note-body { flex: 1; } .thanks-note h2 { font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 700; margin: 0 0 0.3rem; } .thanks-note p { font-size: clamp(0.9rem, 1.5vw, 1rem); line-height: 1.5; margin: 0; max-width: 42em; } .thanks-icon { flex: none; display: flex; align-items: center; justify-content: center; width: clamp(46px, 7vw, 58px); height: clamp(46px, 7vw, 58px); border: 2px solid var(--pink); border-radius: 12px; } .thanks-icon svg { width: 58%; height: 58%; fill: none; stroke: var(--pink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .thanks-mail { flex: none; display: inline-flex; align-items: center; gap: 0.5rem; border: 2px solid var(--pink); border-radius: 12px; padding: 0.6rem 1rem; color: #fff; text-decoration: none; font-size: clamp(0.85rem, 1.5vw, 0.95rem); font-weight: 700; transition: background-color 0.15s ease, transform 0.15s ease; } .thanks-mail svg { width: 18px; height: 18px; fill: none; stroke: var(--pink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .thanks-mail:hover, .thanks-mail:focus-visible { background: rgba(229, 0, 79, 0.18); transform: translateY(-1px); } .thanks-mail:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .thanks-share { text-align: center; /* Trimmed rather than symmetric: #share-status below the buttons reserves a line for its "link copied" message, and with that line empty - which is most of the time - equal padding reads as a bottom-heavy panel. */ padding-bottom: clamp(1rem, 2.2vw, 1.5rem); } .thanks-share h2 { font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 700; margin: 0 0 1rem; } /* Outlined circles rather than the placeholder's brand colours - the client's mock-up draws them this way, and next to the pink-bordered quote and icon boxes above it is the more coherent of the two. Specific enough to win over `.share-btn.is-facebook` and friends regardless of source order. */ .thanks .share-list .share-btn { background: none; border: 2px solid var(--pink); } .thanks .share-list .share-btn:hover, .thanks .share-list .share-btn:focus-visible { background: rgba(229, 0, 79, 0.18); } /* Both classes, deliberately: the placeholder's `.site-footer` sits *below* this section in the file and pushes its two links apart with space-between, so a single class here would lose on source order. Two links with nothing between them read as a pair, not as opposite corners. */ .site-footer.thanks-footer { justify-content: center; gap: clamp(1rem, 3vw, 2rem); } @media (max-width: 640px) { .thanks-note { flex-direction: column; align-items: center; text-align: center; } .thanks-note p { margin-inline: auto; } } /* ---------- Legal page ---------- */ .legal-content { max-width: 880px; width: 100%; text-align: left; } .legal-content h1 { text-align: center; font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 2rem; } .legal-content h2 { font-size: clamp(1.05rem, 2vw, 1.3rem); margin: 2.25rem 0 0.9rem; } .legal-content p { font-size: 0.95rem; line-height: 1.65; margin: 0 0 1rem; } .legal-content a { color: #fff; } /* ---------- Footer ---------- */ .site-footer { display: flex; justify-content: space-between; padding: 1rem clamp(1rem, 4vw, 3rem) 1.4rem; font-size: 0.72rem; } .site-footer a { color: var(--text-muted); text-decoration: none; } .site-footer a:hover { color: var(--text-body); text-decoration: underline; } @media (max-width: 640px) { .site-header { justify-content: center; text-align: center; } .show-addons .cards { grid-template-columns: minmax(0, 1fr); } .submission-badge { align-items: center; } .site-footer { justify-content: center; gap: 1.5rem; } }