/* Genero public site — ported from Mockup/css/style.css. Every rule is scoped under .site for the reason app.css already documents: this file loads after MudBlazor.min.css, so a bare element selector here would beat MudBlazor's and leak into the admin. The public site wraps its content in .site (MainLayout); the admin does not. Two selectors from the mockup are renamed because Blazor has no class to hang them on: `body.subpage` becomes `.site--sub` (set by MainLayout when the route is not the home page), and the bare `header`/`footer` elements become .site-header/.site-footer. */ :root { --teal: #0A89AA; --teal-deep: #0B4C5F; --teal-abyss: #062E3A; --blue: #0066B2; --yellow: #FFD41D; --ice: #EDF6F7; --grey: #9FA2A6; --ink: #2A2E30; --ink-soft: #545454; --line: rgba(10, 137, 170, 0.16); --shadow: 0 30px 70px -30px rgba(6, 46, 58, 0.35); --shadow-sm: 0 12px 30px -16px rgba(6, 46, 58, 0.30); /* The card ring: two layers faint enough to lift a card off the page and no more. --shadow-sm stays for the surfaces the design has no card for. */ --ring: 0 1px 3px rgba(11, 76, 95, .08), 0 8px 24px rgba(11, 76, 95, .06); --font-display: 'Inria Serif', Georgia, serif; --font-body: 'Montserrat', 'Segoe UI', system-ui, sans-serif; --maxw: 1200px; --ease: cubic-bezier(.22, .61, .36, 1); } html { scroll-behavior: smooth; } /* Body copy is Montserrat Light; anything that needs more weight sets its own. */ .site { font-family: var(--font-body); font-weight: 300; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.75; display: flex; flex-direction: column; min-height: 100vh; } .site-main { flex: 1; } .site img { max-width: 100%; height: auto; display: block; } .site a { color: inherit; text-decoration: none; } .site ul { margin: 0; padding: 0; list-style: none; } .site section { position: relative; } .site ::selection { background: var(--yellow); color: var(--teal-abyss); } .site .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } @media (max-width: 720px) { .site .container { padding: 0 20px; } } .site .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .site .reveal.in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .site .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } /* The mockup kills the rest of the motion with a bare `*`. Prefixed with .site so it stops at the public site and never reaches MudBlazor in the admin. The iteration count is what actually ends the looping scroll cue. */ .site, .site *, .site *::before, .site *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } .site .pattern-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: .16; } .site .pattern-bg svg { position: absolute; width: 140%; height: 140%; left: -20%; top: -20%; } .site .corner-accent { position: absolute; top: 0; right: 34px; width: 34px; height: 30px; opacity: .9; } @media (max-width: 720px) { .site .corner-accent { right: 22px; } } .site .eyebrow { display: inline-flex; align-items: flex-start; gap: 10px; font-weight: 700; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--teal); margin: 0 0 16px; } /* The lead-in marker is the GenArrow, not a dash — same rule as everywhere else. Inlined as a data URI rather than a reference because ::before cannot hold an SVG sprite, and a second element in every eyebrow would put a decoration into the content an editor types. */ .site .eyebrow::before { content: ""; display: inline-block; flex: none; width: 15px; aspect-ratio: 554 / 301; margin-top: 4px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20554%20301%22%3E%3Cpath%20d%3D%22M0.0%2C192.0%20Q0.0%2C183.0%204.0%2C172.5%20Q8.0%2C162.0%2014.0%2C155.5%20Q20.0%2C149.0%20141.0%2C74.5%20Q262.0%2C0.0%20273.5%2C0.5%20Q285.0%2C1.0%20293.0%2C4.5%20Q301.0%2C8.0%20414.0%2C72.0%20Q527.0%2C136.0%20535.5%2C143.5%20Q544.0%2C151.0%20548.5%2C161.5%20Q553.0%2C172.0%20553.0%2C182.0%20Q553.0%2C192.0%20549.5%2C202.0%20Q546.0%2C212.0%20538.0%2C221.5%20Q530.0%2C231.0%20477.0%2C262.5%20Q424.0%2C294.0%20408.5%2C293.5%20Q393.0%2C293.0%20345.5%2C266.0%20Q298.0%2C239.0%20283.5%2C237.5%20Q269.0%2C236.0%20260.5%2C239.0%20Q252.0%2C242.0%20212.0%2C267.5%20Q172.0%2C293.0%20161.5%2C296.5%20Q151.0%2C300.0%20136.0%2C298.0%20Q121.0%2C296.0%2073.5%2C269.5%20Q26.0%2C243.0%2017.5%2C234.5%20Q9.0%2C226.0%204.5%2C213.5%20Q0.0%2C201.0%200.0%2C192.0%20Z%22%20fill%3D%22%23FFD41D%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; transform: rotate(90deg); } .site .eyebrow.on-dark { color: var(--yellow); } .site .eyebrow.center-eb { justify-content: center; } .site h1, .site h2, .site h3, .site h4, .site h5 { margin: 0; font-family: var(--font-body); } /* The headline is Montserrat Semibold with one keyword in Inria Serif italic — the guideline puts the serif on the keyword, not on the whole line. No colour on the base rule: several headings sit on a dark band and inherit #fff from it. */ .site h1 { font-weight: 600; font-size: clamp(2.1rem, 5.4vw, 3.6rem); line-height: 1.12; letter-spacing: -.02em; } .site h2, .site h3 { font-weight: 400; } .site h1 em { font-family: var(--font-display); font-weight: 400; font-style: italic; letter-spacing: 0; } .site .section-head { max-width: 660px; margin-bottom: 52px; } .site .section-head h2 { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(1.9rem, 3.2vw, 2.6rem); color: var(--teal-abyss); line-height: 1.16; letter-spacing: -.01em; } .site .section-head p { margin: 16px 0 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.75; max-width: 560px; } .site .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .site .section-head.center p { margin-left: auto; margin-right: auto; } .site .section-head.on-dark h2 { color: #fff; } .site .section-head.on-dark p { color: rgba(255,255,255,.75); } .site .pad { padding: 100px 0; } .site .pad-sm { padding: 72px 0; } @media (max-width: 900px) { .site .pad { padding: 64px 0; } .site .pad-sm { padding: 48px 0; } } .site .bg-ice { background: var(--ice); } .site .bg-grey { background: #F7F9FA; } .site .bg-teal { background: linear-gradient(160deg, var(--teal) 0%, var(--teal-deep) 100%); } .site .bg-abyss { background: linear-gradient(160deg, var(--teal-abyss) 0%, #041b23 100%); } .site .band { background: var(--teal); padding: 16px 0; text-align: center; } .site .band h2 { color: #fff; font-weight: 600; font-size: clamp(1.15rem, 2.2vw, 1.4rem); letter-spacing: .01em; } /* ---------- Buttons ---------- */ .site .btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: .86rem; letter-spacing: .02em; padding: 13px 26px; border-radius: 3px; cursor: pointer; border: 1.5px solid transparent; transition: all .25s ease; white-space: nowrap; font-family: var(--font-body); } /* Five treatments, as the design has them. Hover swaps the fill and nothing moves — the 2px lift and drop shadow came from the older mockup this file was ported from. */ .site .btn-solid { background: var(--teal); color: #fff; } .site .btn-solid:hover { background: var(--blue); } .site .btn-primary { background: var(--yellow); color: var(--teal); } .site .btn-primary:hover { background: #fff; color: var(--teal); } .site .btn-white { background: #fff; color: var(--teal); } .site .btn-white:hover { background: var(--ice); } .site .btn-ghost { border-color: rgba(255,255,255,.75); color: #fff; background: none; } .site .btn-ghost:hover { background: #fff; color: var(--teal); } .site .btn-line { border-color: var(--teal); color: var(--teal); background: none; } .site .btn-line:hover { background: var(--teal); color: #fff; } @media (max-width: 560px) { .site .btn { padding: 12px 20px; font-size: .8rem; } .site .hero-actions .btn, .site .cta-band .actions .btn { flex: 1 1 100%; justify-content: center; } } /* The GenArrow rules above own the button icon now. A generic `.btn svg` rule here would set transform:translateX and cancel the arrow's rotation, leaving every call to action pointing upwards. */ /* ---------- Language switch ---------- */ /* A real toggle: the Genero Yellow knob slides between the halves rather than the two labels swapping backgrounds. The track hides its overflow and drops its gap so each half is exactly 50% wide and translateX(100%) lands the knob on the second button. */ .site .lang-switch { position: relative; overflow: hidden; display: flex; align-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35); border-radius: 20px; padding: 3px; gap: 0; transition: all .3s ease; } .site-header.scrolled .lang-switch, .site-header.menu-open .lang-switch, .site--sub .lang-switch { background: rgba(10,137,170,.08); border-color: rgba(10,137,170,.25); } .site .lang-knob { position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); height: calc(100% - 6px); border-radius: 16px; background: var(--yellow); transition: transform .3s ease; pointer-events: none; } .site .lang-switch.is-id .lang-knob { transform: translateX(100%); } .site .lang-btn { position: relative; z-index: 1; flex: 1 0 auto; min-width: 42px; text-align: center; border: none; background: none; cursor: pointer; font-family: var(--font-body); font-size: .7rem; font-weight: 700; letter-spacing: .03em; padding: 6px 12px; border-radius: 16px; color: rgba(255,255,255,.75); transition: color .25s ease; } .site-header.scrolled .lang-btn, .site-header.menu-open .lang-btn, .site--sub .lang-btn { color: var(--ink-soft); } .site .lang-btn.active { background: none; color: var(--teal-abyss); } .site .mobile-menu .lang-switch { background: rgba(10,137,170,.08); border-color: rgba(10,137,170,.25); justify-content: center; width: fit-content; } .site .mobile-menu .lang-btn { color: var(--ink-soft); } .site .mobile-menu .lang-btn.active { color: var(--teal-abyss); } /* ---------- Header & nav ---------- */ /* The scrim over the hero is an Innovation Teal ::before layer, not a background on the bar itself. A gradient is a background-image, and background-image does not interpolate: set on .site-header it snaps off the moment .scrolled lands while only the white colour fades. A separate layer has an opacity to animate instead. It sits at z-index -1, inside the header's own stacking context, so it paints above the page and below the logo and nav. Positioning .navbar-inner would do the same job, but it would also become the containing block for .dropdown-panel and cap the mega panel at the width of the header track. .menu-open is the third state that wants the solid bar: the drawer now opens beneath a header that stays visible, and a white logo over a white panel reads as nothing. */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 78px; transition: all .35s ease; background: transparent; } .site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,137,170,.55) 0%, rgba(10,137,170,0) 100%); transition: opacity .35s ease; pointer-events: none; } .site-header.scrolled, .site-header.menu-open, .site--sub .site-header { background: rgba(255,255,255,.97); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(159,162,166,.35); } .site-header.scrolled::before, .site-header.menu-open::before, .site--sub .site-header::before { opacity: 0; } .site-header .navbar-inner { display: flex; align-items: center; gap: 20px; height: 100%; padding: 0 22px; max-width: 1320px; margin: 0 auto; } .site .brand { display: flex; align-items: center; gap: 10px; } .site .brand img { height: 42px; width: auto; display: block; } .site .brand img.logo-dark { display: none; } .site .brand img.logo-light { display: block; } .site-header.scrolled .brand img.logo-dark, .site-header.menu-open .brand img.logo-dark, .site--sub .brand img.logo-dark { display: block; } .site-header.scrolled .brand img.logo-light, .site-header.menu-open .brand img.logo-light, .site--sub .brand img.logo-light { display: none; } .site nav.main-nav { display: flex; align-items: center; gap: 4px; margin-left: 14px; } .site .nav-item { position: static; } /* background, border, font-family and cursor are not decoration here: this class also styles the