/* ============================================================================= portal.css — the welcome page inside the Fluent Community portal. Loaded after site.css (the shared .tbch design), only on /welcome/. Colours are Fluent Community's own CSS variables, so the page follows the portal's theme and its light/dark switch exactly — nothing is copied here. Type is the portal's font (headings included), so the page reads as part of the portal. ============================================================================= */ .tbch.tbcp { --tb-cream: var(--fcom-secondary-bg, #f0f2f5); --tb-sand: var(--fcom-secondary-bg, #f0f2f5); --tb-card: var(--fcom-primary-bg, #fff); --tb-line: var(--fcom-primary-border, #e3e8ee); --tb-ink: var(--fcom-primary-text, #19283a); --tb-muted: var(--fcom-secondary-text, #525866); --tb-accent: var(--fcom-primary-button, #1d9bf0); --tb-accent-dark: var(--fcom-primary-button, #1d9bf0); --tb-link: var(--fcom-text-link, var(--fcom-primary-button, #1d9bf0)); --tb-sage: var(--fcom-primary-button, #1d9bf0); --tb-sage-light: var(--fcom-highlight-bg, var(--fcom-active-bg, #e8f5fd)); background: transparent; /* the portal frame shows through; cards carry the contrast */ font-family: inherit; } .tbch.tbcp h1, .tbch.tbcp h2, .tbch.tbcp h3 { font-family: inherit; font-weight: 700; letter-spacing: -.01em; } .tbch.tbcp .tbch-btn { color: var(--fcom-primary-button-text, #fff) !important; } .tbch.tbcp .tbch-btn--line { color: var(--tb-link) !important; background: transparent; } .tbch.tbcp .tbch-btn--line:hover { color: var(--fcom-primary-button-text, #fff) !important; background: var(--tb-accent); } .tbch.tbcp .tbch-hero { background: transparent; padding: 24px 0 8px; } /* ===== Hero banner: the illustrations crossfade (site.css .tbch-art) behind the name ===== Text sits on the pictures, so it is white in light and dark mode alike, over a dark fade from the bottom. 2:1 like the illustrations on wide screens; taller on phones so the name fits. */ .tbcp-banner { position: relative; display: flex; align-items: flex-end; min-height: 360px; border-radius: 24px; overflow: hidden; background: #1b1f27; } @media (min-width: 700px) { .tbcp-banner { aspect-ratio: 2 / 1; min-height: 0; } } .tbcp-banner .tbch-art { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; } .tbcp-banner::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(8,10,14,.82) 0%, rgba(8,10,14,.45) 40%, rgba(8,10,14,0) 72%); } .tbcp-banner-text { position: relative; z-index: 2; padding: 28px 24px; } @media (min-width: 700px) { .tbcp-banner-text { padding: 40px 48px; } } .tbch.tbcp .tbcp-banner .tbch-eyebrow { color: rgba(255,255,255,.85); margin-bottom: 8px; } .tbch.tbcp .tbcp-banner h1 { color: #fff; margin: 0 0 6px; font-size: clamp(38px, 6vw, 68px); line-height: 1.05; text-shadow: 0 2px 16px rgba(0,0,0,.35); } .tbch.tbcp .tbcp-banner .tbch-lead { color: rgba(255,255,255,.92); margin: 0; font-size: clamp(17px, 2vw, 21px); } /* Sections sit on one shared background; only the rounded cards (events, posts, visit, video) stand out. Alternating section colours drew square-edged boxes inside the portal frame, which looked off beside the rounded cards — most of all in dark mode. */ .tbch.tbcp .tbch-section, .tbch.tbcp .tbch-section--sand { background: transparent; } .tbch.tbcp [id] { scroll-margin-top: calc(var(--fcom-header-height, 60px) + 16px); } /* room for FC's mobile bottom bar */ @media (max-width: 767px) { .tbch.tbcp { padding-bottom: calc(var(--fcom-mobile-menu-height, 60px) + 8px); } } /* ===== Events as date tiles (live) ===== */ .tbl-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .tbl-events a { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: 16px; color: inherit; text-decoration: none; transition: box-shadow .2s ease, border-color .2s ease; } .tbl-events a:hover { box-shadow: 0 8px 24px rgba(15,20,25,.10); border-color: var(--tb-accent); } .tbl-ev-tile { flex: none; width: 60px; height: 64px; border-radius: 12px; background: var(--tb-accent); color: var(--fcom-primary-button-text, #fff); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } .tbl-ev-month { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .9; } .tbl-ev-day { font-size: 26px; font-weight: 700; margin-top: 4px; } .tbl-ev-text { display: grid; gap: 2px; min-width: 0; } .tbl-ev-title { font-size: 18px; font-weight: 600; color: var(--tb-ink); } .tbl-ev-meta { font-size: 14px; color: var(--tb-muted); } @media (min-width: 700px) { .tbl-events { grid-template-columns: 1fr 1fr; } } .tbl-loading, .tbl-fallback { color: var(--tb-muted); padding: 16px 4px; list-style: none; } /* ===== Latest posts (live) ===== */ .tbl-posts { display: grid; gap: 20px; } .tbl-post { display: flex; flex-direction: column; background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: 16px; overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .2s ease; } .tbl-post:hover { box-shadow: 0 8px 24px rgba(15,20,25,.10); } .tbl-post img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--tb-sand); } .tbl-post-body { padding: 16px 20px 20px; } .tbl-post h3 { font-size: 19px; margin: 0 0 6px; color: var(--tb-ink); } .tbl-post p { margin: 0; font-size: 15px; color: var(--tb-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (min-width: 700px) { .tbl-posts { grid-template-columns: repeat(3, 1fr); } } /* ===== Video ===== */ /* Full width of the section, so its edges line up with the heading row and the cards. */ .tbl-video { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; border: 1px solid var(--tb-line); } .tbl-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ===== App row ===== */ .tbl-app { display: grid; gap: 20px; align-items: center; } @media (min-width: 700px) { .tbl-app { grid-template-columns: 1.2fr 1fr; } } /* ===== Visit: details beside a map ===== */ .tbl-visit { display: grid; gap: 28px; background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: 24px; padding: 28px 22px; } .tbl-facts { list-style: none; margin: 8px 0 18px; padding: 0; display: grid; gap: 10px; } .tbl-facts li { display: flex; gap: 12px; font-size: 17px; } .tbl-facts span { flex: none; width: 64px; color: var(--tb-muted); font-weight: 600; font-size: 15px; padding-top: 1px; } .tbl-map { min-height: 280px; border-radius: 18px; overflow: hidden; background: var(--tb-sand); } .tbl-map iframe { display: block; width: 100%; height: 100%; min-height: 280px; border: 0; } @media (min-width: 900px) { .tbl-visit { grid-template-columns: 1fr 1fr; padding: 48px; align-items: stretch; } } /* ===== Page foot (the portal has no footer) ===== */ .tbcp-foot { padding: 18px 0 22px; border-top: 1px solid var(--tb-line); background: transparent; } .tbcp-foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; } .tbcp-copy { margin: 0; font-size: 13px; color: var(--tb-muted); } .tbcp-copy a { color: var(--tb-muted); text-decoration: none; } .tbcp-copy a:hover { color: var(--tb-link); text-decoration: underline; } .tbcp-badge { color: var(--tb-muted); font-size: 13px; } @media (max-width: 599px) { .tbcp-foot-row { flex-direction: column-reverse; text-align: center; } } /* The Safe Ceremonies badge brings its own