/* ===================================================================== EDII-ABIRF — public landing page Bold grotesk type, orange accents, indigo panel, gradient orb. Deliberately separate from theme.css (the signed-in app). ===================================================================== */ /* Archivo is linked from the (see includes/landing_head.php). An @import here would hide the font request behind this file's own download and parse, delaying first paint. */ :root { --l-font: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --l-ink: #0d0a1f; --l-ink-2: #3d3a55; --l-muted: #6f6b87; --l-faint: #9c98b0; /* Brand orange, one shade deeper than the logo's #f1471d so that white text on it clears WCAG AA (4.69:1 rather than 3.71:1). */ --l-accent: #d63a12; --l-accent-d: #b32f0c; --l-on-accent: #ffffff; --l-indigo: #2d179c; --l-indigo-2:#3d22c4; --l-lav: #ece8fc; --l-lav-2: #f6f4ff; --l-orange: #ff6a1f; --l-orange-2:#f5401b; --l-line: #e6e2f3; --l-white: #fff; --l-r: 20px; --l-r-lg: 32px; --l-sh: 0 10px 34px rgba(30, 18, 90, .08); --l-sh-lg: 0 24px 64px rgba(30, 18, 90, .14); --l-max: 1180px; /* Full-bleed backgrounds, content centred in a 1180px column. */ --l-gutter: max(24px, calc((100% - 1180px) / 2)); } *, *::before, *::after { box-sizing: border-box; } body.landing { margin: 0; font-family: var(--l-font); font-size: 16px; line-height: 1.6; color: var(--l-ink); background: var(--l-white); -webkit-font-smoothing: antialiased; } .landing h1, .landing h2, .landing h3, .landing h4 { margin: 0; font-weight: 800; letter-spacing: -.035em; line-height: 1.04; } .landing p { margin: 0; } .landing a { color: inherit; text-decoration: none; } .landing ul { margin: 0; padding: 0; list-style: none; } .landing img { max-width: 100%; display: block; } .wrap { width: 100%; max-width: var(--l-max); margin: 0 auto; padding: 0 24px; } /* Full-width page. Section backgrounds run edge to edge; their content is held to --l-max by the gutter padding. */ .sheet { background: var(--l-white); width: 100%; } /* ------------------------------------------------------------- nav */ .lnav { display: flex; align-items: center; gap: 26px; padding: 20px var(--l-gutter); position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s ease; } .lnav.is-stuck { border-bottom-color: var(--l-line); } .lnav__logo img { width: 118px; height: auto; } /* Transparent on desktop: .lnav__links and .lnav__cta stay direct flex children of .lnav. On mobile it becomes the dropdown panel. */ .lnav__menu { display: contents; } .lnav__links { display: flex; gap: 28px; margin: 0 auto; } .lnav__links a { font-size: 14.5px; font-weight: 600; color: var(--l-ink-2); transition: color .18s ease; } .lnav__links a:hover { color: var(--l-indigo); } .lnav__cta { display: flex; align-items: center; gap: 10px; } .lbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border: 0; border-radius: 99px; font: inherit; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; cursor: pointer; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; } .lbtn svg { width: 15px; height: 15px; } .landing .lbtn--accent { background: var(--l-accent); color: var(--l-on-accent); } .landing .lbtn--accent:hover { background: var(--l-accent-d); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(214, 58, 18, .40); } .landing .lbtn--dark { background: var(--l-ink); color: #fff; } .landing .lbtn--dark:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(13, 10, 31, .28); } .landing .lbtn--ghost { background: var(--l-white); color: var(--l-ink); border: 1.5px solid var(--l-line); } .landing .lbtn--ghost:hover { border-color: var(--l-ink); transform: translateY(-2px); } .landing .lbtn--white { background: #fff; color: var(--l-ink); } .landing .lbtn--white:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, .18); } .lbtn--sm { padding: 9px 17px; font-size: 13.5px; } .navtoggle { display: none; background: none; border: 0; cursor: pointer; padding: 6px; color: var(--l-ink); } .navtoggle svg { width: 24px; height: 24px; } /* ------------------------------------------------------------ hero */ .hero { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 56px var(--l-gutter) 72px; } .pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px; border-radius: 99px; background: var(--l-lav); color: var(--l-indigo); font-size: 12.5px; font-weight: 700; letter-spacing: -.005em; margin-bottom: 22px; } .pill__go { width: 22px; height: 22px; border-radius: 50%; background: var(--l-white); display: grid; place-items: center; } .pill__go svg { width: 12px; height: 12px; } .hero h1 { font-size: clamp(38px, 5.2vw, 62px); font-weight: 900; } .hero h1 em { font-style: normal; color: var(--l-indigo); } .hero__sub { font-size: 16px; color: var(--l-muted); margin-top: 22px; max-width: 440px; line-height: 1.62; } .hero__cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; } .hero__meta { display: flex; gap: 30px; margin-top: 40px; flex-wrap: wrap; } .hero__meta div { display: flex; flex-direction: column; } .hero__meta b { font-size: 25px; font-weight: 800; letter-spacing: -.03em; } .hero__meta span { font-size: 12.5px; color: var(--l-muted); font-weight: 600; } /* The visual block: gradient orb + floating fact cards, no photography. */ .heroart { position: relative; aspect-ratio: 1 / 1.06; border-radius: var(--l-r-lg); background: linear-gradient(150deg, #2d179c 0%, #4a26d8 46%, #7b3fe4 100%); overflow: hidden; box-shadow: var(--l-sh-lg); } .heroart__orb { position: absolute; right: -18%; top: 8%; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #ffd08a 0%, var(--l-orange) 38%, var(--l-orange-2) 66%, rgba(245, 64, 27, 0) 74%); filter: blur(.4px); } .heroart__ring { position: absolute; border: 1.5px solid rgba(255, 255, 255, .16); border-radius: 50%; } .heroart__ring:nth-of-type(1) { inset: 8%; } .heroart__ring:nth-of-type(2) { inset: 20%; } .heroart__ring:nth-of-type(3) { inset: 32%; } .factcard { position: absolute; display: flex; align-items: center; gap: 12px; padding: 13px 17px 13px 13px; background: var(--l-white); border-radius: 16px; box-shadow: 0 14px 34px rgba(13, 10, 31, .22); max-width: 74%; } /* Doubled class on purpose: the icon is a , so the `.factcard span` text rule below outranks a single class and would paint it muted grey. */ .factcard .factcard__ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--l-lav); color: var(--l-indigo); } .factcard .factcard__ico svg { width: 19px; height: 19px; } .factcard .factcard__ico--accent { background: var(--l-accent); color: var(--l-on-accent); } .factcard b { display: block; font-size: 13.6px; font-weight: 700; line-height: 1.32; } .factcard span { font-size: 12px; color: var(--l-muted); } .factcard--a { left: 6%; bottom: 19%; } .factcard--b { left: 6%; bottom: 5%; max-width: 62%; } /* --------------------------------------------------------- section */ .sec { padding: 76px var(--l-gutter); } .sec--lav { background: var(--l-lav-2); } .sec__head { max-width: 620px; margin-bottom: 42px; } .sec__head--mid { margin-inline: auto; text-align: center; } .eyebrow { display: inline-block; padding: 6px 14px; border-radius: 99px; background: var(--l-accent); color: var(--l-on-accent); font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 16px; } /* An unsized SVG in an inline-block pill balloons to its 300px default. */ .eyebrow svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; } .eyebrow--lav { background: var(--l-lav); color: var(--l-indigo); } .sec h1, .sec h2 { font-size: clamp(28px, 3.6vw, 42px); } .sec__lead { font-size: 15.5px; color: var(--l-muted); margin-top: 16px; line-height: 1.65; } /* ---------------------------------------------------- indigo panel */ .panel { position: relative; overflow: hidden; margin: 0 var(--l-gutter) 76px; border-radius: var(--l-r-lg); background: var(--l-indigo); color: #fff; padding: 62px 54px 54px; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; } .panel__orb { position: absolute; left: 26%; bottom: -46%; width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 42% 36%, #ffc46b 0%, var(--l-orange) 34%, var(--l-orange-2) 62%, rgba(245, 64, 27, 0) 72%); pointer-events: none; } .panel > * { position: relative; z-index: 1; } .panel h2 { color: #fff; font-size: clamp(28px, 3.4vw, 40px); } .panel h2 em { font-style: normal; color: #ffe9a8; } .panel__body { font-size: 14.5px; color: rgba(255, 255, 255, .74); margin-top: 26px; max-width: 400px; line-height: 1.65; } .panel__link { display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; font-size: 14px; font-weight: 700; color: #fff; } .panel__link svg { width: 15px; height: 15px; } .panel__link:hover { color: var(--l-accent); } .pcards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .pcard { background: var(--l-white); color: var(--l-ink); border-radius: 18px; padding: 20px; min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .2s ease, box-shadow .2s ease; } .pcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, .22); } .pcard__ico { color: var(--l-indigo); } .pcard__ico svg { width: 26px; height: 26px; } .pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pcard__foot b { font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; } .pcard__foot svg { width: 15px; height: 15px; color: var(--l-muted); flex: none; } /* ----------------------------------------------------- offer cards */ .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .ocard { background: var(--l-white); border: 1.5px solid var(--l-line); border-radius: var(--l-r); padding: 28px 26px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .ocard:hover { transform: translateY(-5px); box-shadow: var(--l-sh); border-color: transparent; } .ocard__ico { width: 50px; height: 50px; border-radius: 15px; margin-bottom: 20px; display: grid; place-items: center; background: var(--l-lav); color: var(--l-indigo); } .ocard__ico svg { width: 23px; height: 23px; } .ocard__ico--accent { background: var(--l-accent); color: var(--l-on-accent); } .ocard h3 { font-size: 19px; margin-bottom: 10px; letter-spacing: -.028em; } .ocard p { font-size: 14px; color: var(--l-muted); line-height: 1.62; } /* --------------------------------------------------------- numbers */ .stats { text-align: center; } .stats__big { font-size: clamp(64px, 13vw, 168px); font-weight: 900; letter-spacing: -.055em; line-height: .9; background: linear-gradient(140deg, var(--l-ink) 20%, var(--l-indigo) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .stats__cap { font-size: 14px; color: var(--l-muted); font-weight: 600; margin-top: 14px; } .statrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 54px; } .statbox { background: var(--l-white); border: 1.5px solid var(--l-line); border-radius: var(--l-r); padding: 26px 22px; text-align: left; } .statbox b { display: block; font-size: 34px; font-weight: 900; letter-spacing: -.04em; } .statbox span { font-size: 12.5px; font-weight: 700; color: var(--l-muted); letter-spacing: .05em; text-transform: uppercase; } .statbox i { display: block; font-style: normal; font-size: 13px; color: var(--l-muted); margin-top: 7px; } /* --------------------------------------------------------- sectors */ /* Focus sectors, as a numbered index rather than a row of pills. Each item is "01 ————" over the sector name: ::before draws the counter, ::after the rule, so the markup stays a plain
  • name
    • . */ .sectors { list-style: none; counter-reset: sector; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 30px; /* Zero the
      UA indent so the grid lines up with the content column. */ margin: 0 0 44px; padding: 0; } .sectors li { counter-increment: sector; display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'num rule' 'name name'; align-items: center; column-gap: 12px; padding: 20px 0 4px; } .sectors li::before { grid-area: num; content: counter(sector, decimal-leading-zero); font-size: 12.5px; font-weight: 800; letter-spacing: .1em; color: var(--l-accent); font-variant-numeric: tabular-nums; } .sectors li::after { grid-area: rule; content: ''; height: 1.5px; background: var(--l-line); transition: background .2s ease; } .sectors li span { grid-area: name; margin-top: 11px; font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; line-height: 1.34; color: var(--l-ink); transition: color .2s ease; } .sectors li:hover::after { background: var(--l-accent); } .sectors li:hover span { color: var(--l-indigo); } /* ----------------------------------------------------------- steps */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: s; } .step-i { position: relative; padding: 30px 24px 26px; border-radius: var(--l-r); background: var(--l-white); border: 1.5px solid var(--l-line); } .step-i::before { counter-increment: s; content: '0' counter(s); display: block; font-size: 30px; font-weight: 900; letter-spacing: -.05em; color: var(--l-accent-d); margin-bottom: 14px; } .step-i h4 { font-size: 16.5px; margin-bottom: 8px; } .step-i p { font-size: 13.6px; color: var(--l-muted); line-height: 1.6; } /* -------------------------------------------------------- contact */ .contactgrid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px; align-items: stretch; } .contactcard { background: var(--l-ink); color: #fff; border-radius: var(--l-r-lg); padding: 44px 40px; } .contactcard h2 { color: #fff; } .contactcard p { color: rgba(255, 255, 255, .68); font-size: 14.5px; margin-top: 16px; line-height: 1.65; } .contactlist { display: flex; flex-direction: column; gap: 16px; margin-top: 30px; } .contactlist a, .contactlist div { display: flex; align-items: flex-start; gap: 13px; font-size: 14.5px; color: rgba(255, 255, 255, .9); } .contactlist svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--l-accent); } .contactlist a:hover { color: var(--l-accent); } .applycard { background: var(--l-accent); color: var(--l-on-accent); border-radius: var(--l-r-lg); padding: 44px 38px; display: flex; flex-direction: column; justify-content: center; } .applycard h3 { color: var(--l-on-accent); } .applycard h3 { font-size: 27px; margin-bottom: 14px; } .applycard p { font-size: 14.5px; color: rgba(255, 255, 255, .88); line-height: 1.6; margin-bottom: 26px; } .applycard ul { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; } .applycard li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 600; } .applycard li svg { width: 17px; height: 17px; flex: none; margin-top: 2px; } /* ---------------------------------------------------------- footer */ .lfoot { background: var(--l-lav); padding: 58px var(--l-gutter) 20px; } .lfoot__top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 34px; padding-bottom: 40px; } .lfoot__top p { font-size: 14px; color: var(--l-ink-2); max-width: 300px; line-height: 1.62; } .lfoot h5 { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--l-muted); margin: 0 0 16px; } .lfoot ul { display: flex; flex-direction: column; gap: 10px; } .lfoot ul a { font-size: 14px; color: var(--l-ink-2); font-weight: 500; } .lfoot ul a:hover { color: var(--l-indigo); } .lfoot__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 0; border-top: 1px solid rgba(45, 23, 156, .12); font-size: 12.5px; color: var(--l-ink-2); font-weight: 600; } /* ------------------------------------------------------ responsive */ @media (max-width: 1020px) { .hero { grid-template-columns: 1fr; gap: 40px; padding-block: 40px 56px; } .heroart { max-width: 520px; aspect-ratio: 1 / .92; } .panel { grid-template-columns: 1fr; padding: 46px 32px 40px; margin-bottom: 56px; } .grid3, .grid4, .statrow, .steps { grid-template-columns: repeat(2, 1fr); } .sectors { grid-template-columns: repeat(2, 1fr); } .contactgrid { grid-template-columns: 1fr; } .lfoot__top { grid-template-columns: 1fr 1fr; } :root { --l-gutter: 26px; } .sec { padding-block: 56px; } } @media (max-width: 720px) { :root { --l-gutter: 20px; } .lnav { padding-block: 14px; } /* Sign in and Apply now live in the drawer alongside the links. */ .lnav__menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: #fff; border-bottom: 1px solid var(--l-line); padding: 6px 20px 18px; box-shadow: 0 14px 30px rgba(13, 10, 31, .10); } .lnav__menu.is-open { display: flex; } .lnav__links { position: static; flex-direction: column; gap: 0; margin: 0; background: none; border: 0; padding: 0; } .lnav__links a { padding: 13px 0; border-bottom: 1px solid var(--l-line); } .lnav__cta { flex-direction: column; align-items: stretch; gap: 10px; margin: 16px 0 0; } .lnav__cta .lbtn { width: 100%; padding: 13px 22px; font-size: 14.5px; } .navtoggle { display: block; margin-left: auto; } .grid3, .grid4, .grid2, .statrow, .steps, .pcards, .lfoot__top { grid-template-columns: 1fr; } .sectors { grid-template-columns: 1fr; } .sec { padding-block: 44px; } .panel { margin-bottom: 44px; padding: 36px 24px 30px; } .hero { padding-block: 30px 44px; } .contactcard, .applycard { padding: 32px 26px; } .factcard { max-width: 84%; } .lfoot { padding-block: 44px 16px; } } /* ===================================================================== Facility booking — browse, book, confirm ===================================================================== */ .bookbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 20px; border-radius: 16px; background: var(--l-lav-2); border: 1.5px solid var(--l-line); } .bookbar label { display: flex; align-items: center; gap: 12px; } .bookbar label > span { font-size: 13.5px; font-weight: 700; color: var(--l-ink-2); } .bookbar input { font: inherit; font-size: 14px; font-weight: 600; padding: 9px 14px; border-radius: 10px; border: 1.5px solid var(--l-line); background: #fff; color: var(--l-ink); } .bookbar__note { font-size: 13px; color: var(--l-muted); font-weight: 600; margin-left: auto; } /* -------------------------------------------------------- facility grid */ .fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .fcard { border: 1.5px solid var(--l-line); border-radius: var(--l-r); overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .fcard:hover { transform: translateY(-5px); box-shadow: var(--l-sh); border-color: transparent; } .fcard__art { position: relative; height: 148px; overflow: hidden; background: linear-gradient(150deg, #2d179c 0%, #4a26d8 55%, #7b3fe4 100%); } .fcard__orb { position: absolute; right: -14%; top: -28%; width: 66%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #ffd08a 0%, var(--l-orange) 40%, var(--l-orange-2) 66%, rgba(245,64,27,0) 74%); } .fcard__ico { position: absolute; left: 20px; bottom: 18px; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .18); color: #fff; backdrop-filter: blur(6px); } .fcard__ico svg { width: 22px; height: 22px; } .fcard__tag { position: absolute; right: 14px; top: 14px; padding: 5px 12px; border-radius: 99px; background: var(--l-accent); color: var(--l-on-accent); font-size: 11.5px; font-weight: 800; } .fcard__tag--out { background: rgba(255, 255, 255, .22); color: #fff; } .fcard__body { padding: 20px; display: flex; flex-direction: column; flex: 1; } .fcard__body h3 { font-size: 19px; margin-bottom: 8px; } .fcard__loc { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--l-muted); font-weight: 600; margin-bottom: 10px; } .fcard__loc svg { width: 14px; height: 14px; flex: none; } .fcard__desc { font-size: 13.8px; color: var(--l-muted); line-height: 1.6; margin-bottom: 20px; } .fcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--l-line); } .fcard__price b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.03em; } .fcard__price span { font-size: 11.8px; color: var(--l-muted); font-weight: 600; } /* ------------------------------------------------------- booking form */ .backlink { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; font-size: 13.5px; font-weight: 700; color: var(--l-muted); } .backlink:hover { color: var(--l-indigo); } .backlink svg { width: 15px; height: 15px; } .bookgrid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; } .bookform h1, .bookform h2 { font-size: clamp(26px, 3.2vw, 36px); } .fgroup { border: 1.5px solid var(--l-line); border-radius: var(--l-r); padding: 24px; margin-bottom: 20px; } .fgroup__title { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--l-ink-2); } .fgroup__title svg { width: 17px; height: 17px; color: var(--l-indigo); } .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .ffield { display: block; margin-bottom: 16px; } .ffield > span { display: block; font-size: 13px; font-weight: 700; color: var(--l-ink-2); margin-bottom: 7px; } .ffield > span b { color: var(--l-accent-d); } .ffield input, .ffield textarea, .ffield select { width: 100%; font: inherit; font-size: 14.5px; padding: 12px 15px; border-radius: 12px; border: 1.5px solid var(--l-line); background: #fff; color: var(--l-ink); outline: none; transition: border-color .16s ease, box-shadow .16s ease; } .ffield textarea { resize: vertical; line-height: 1.6; } .ffield input:focus, .ffield textarea:focus { border-color: var(--l-indigo); box-shadow: 0 0 0 4px rgba(45, 23, 156, .12); } .ffield input[readonly] { background: var(--l-lav-2); color: var(--l-muted); } .ffield input::-webkit-datetime-edit-fields-wrapper { padding-top: 0; padding-bottom: 0; } .ferr { display: block; margin-top: 7px; font-size: 12.5px; font-weight: 700; color: var(--l-orange-2); } /* slot picker */ .slotpick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; } .slot { position: relative; cursor: pointer; } .slot input { position: absolute; opacity: 0; width: 0; height: 0; } .slot__box { display: block; padding: 15px 14px; border-radius: 14px; border: 1.5px solid var(--l-line); background: #fff; transition: border-color .18s ease, background .18s ease, transform .18s ease; } .slot__box b { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -.02em; } .slot__box i { display: block; font-style: normal; font-size: 12px; color: var(--l-muted); margin-top: 3px; } .slot__box em { display: block; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--l-indigo); margin-top: 8px; } .slot:hover .slot__box { border-color: var(--l-indigo); transform: translateY(-2px); } .slot input:checked + .slot__box { border-color: var(--l-accent-d); background: var(--l-accent); color: var(--l-on-accent); box-shadow: 0 8px 20px rgba(214, 58, 18, .36); } /* The whole selected tile goes white-on-orange. */ .slot input:checked + .slot__box b, .slot input:checked + .slot__box i, .slot input:checked + .slot__box em { color: var(--l-on-accent); } .slot--out { cursor: not-allowed; opacity: .5; } .slot--out .slot__box em { color: var(--l-orange-2); } .slot--out:hover .slot__box { border-color: var(--l-line); transform: none; } .fnote { font-size: 12.5px; color: var(--l-muted); margin-top: 14px; text-align: center; line-height: 1.55; } .fnote a { color: var(--l-indigo); font-weight: 700; } /* -------------------------------------------------------- summary card */ .booksum { position: sticky; top: 96px; border: 1.5px solid var(--l-line); border-radius: var(--l-r); overflow: hidden; background: #fff; padding-bottom: 22px; } .booksum__art { position: relative; height: 112px; overflow: hidden; background: linear-gradient(150deg, #2d179c 0%, #4a26d8 55%, #7b3fe4 100%); } .booksum h3 { font-size: 20px; margin: 18px 22px 8px; } .booksum .fcard__loc, .booksum .fcard__desc { margin-left: 22px; margin-right: 22px; } .sumlist { margin: 4px 22px 0; } .sumlist > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px dashed var(--l-line); } .sumlist dt { font-size: 13px; color: var(--l-muted); font-weight: 600; } .sumlist dd { margin: 0; font-size: 13.8px; font-weight: 700; text-align: right; } .sumlist dd span { font-weight: 600; color: var(--l-muted); font-size: 12px; display: block; } .sumlist--wide { max-width: 460px; margin-inline: auto; text-align: left; } .sumtotal { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 18px 22px 0; padding: 16px 18px; border-radius: 14px; background: var(--l-accent); color: var(--l-on-accent); } .sumtotal span { font-size: 13px; font-weight: 700; } .sumtotal b { font-size: 22px; font-weight: 900; letter-spacing: -.035em; } /* ------------------------------------------------------- confirmation */ .donebox { max-width: 620px; margin: 0 auto; text-align: center; } .donebox__tick { width: 78px; height: 78px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 26px; background: var(--l-accent); color: var(--l-on-accent); } .donebox__tick svg { width: 34px; height: 34px; } .donebox h1, .donebox h2 { font-size: clamp(28px, 3.6vw, 40px); } .donebox__cta { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; } .refbig { margin: 28px auto; padding: 20px 24px; max-width: 380px; border: 1.5px dashed var(--l-indigo); border-radius: 18px; background: var(--l-lav); } .refbig span { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--l-indigo); } .refbig b { display: block; font-size: 26px; font-weight: 900; letter-spacing: -.03em; margin-top: 5px; } /* ------------------------------------------------------------ alerts */ .lalert { display: flex; align-items: flex-start; gap: 12px; padding: 15px 19px; border-radius: 14px; margin-bottom: 24px; font-size: 14px; font-weight: 600; line-height: 1.55; } .lalert svg { width: 19px; height: 19px; flex: none; margin-top: 1px; } .lalert--bad { background: #fdece9; color: #c0341c; } .lalert--info { background: var(--l-lav); color: var(--l-indigo); } .lalert--good { background: #e9f9ea; color: #1c7a34; } .emptybox { text-align: center; padding: 60px 24px; border: 1.5px dashed var(--l-line); border-radius: var(--l-r); } .emptybox h1, .emptybox h3 { font-size: 20px; margin-bottom: 10px; } .emptybox p { font-size: 14.5px; color: var(--l-muted); margin-bottom: 22px; } @media (max-width: 1020px) { .fgrid { grid-template-columns: repeat(2, 1fr); } .bookgrid { grid-template-columns: 1fr; } .booksum { position: static; } } @media (max-width: 720px) { .fgrid { grid-template-columns: 1fr; } .frow, .slotpick { grid-template-columns: 1fr; } .bookbar__note { margin-left: 0; flex-basis: 100%; } .fgroup { padding: 20px 17px; } } /* ===================================================================== Achievements / Programs / Events — cards and detail page ===================================================================== */ .ngrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .ncard { display: flex; flex-direction: column; border: 1.5px solid var(--l-line); border-radius: var(--l-r); background: #fff; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .ncard:hover { transform: translateY(-5px); box-shadow: var(--l-sh); border-color: transparent; } .ncard__art { position: relative; display: block; height: 176px; overflow: hidden; background: linear-gradient(150deg, #2d179c 0%, #4a26d8 55%, #7b3fe4 100%); } .ncard__art img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .ncard:hover .ncard__art img { transform: scale(1.05); } .ncard__date { position: absolute; left: 14px; top: 14px; padding: 6px 13px; border-radius: 99px; background: var(--l-accent); color: var(--l-on-accent); font-size: 11.5px; font-weight: 800; letter-spacing: -.01em; } .ncard__body { padding: 20px; display: flex; flex-direction: column; flex: 1; } .ncard__tag { display: inline-block; align-self: flex-start; margin-bottom: 11px; padding: 4px 11px; border-radius: 99px; background: var(--l-lav); color: var(--l-indigo); font-size: 11.5px; font-weight: 700; } .ncard__body h3 { font-size: 18.5px; line-height: 1.24; margin-bottom: 10px; } .ncard__body h3 a:hover { color: var(--l-indigo); } .ncard__sum { font-size: 13.8px; color: var(--l-muted); line-height: 1.62; margin-bottom: 14px; } .ncard__where { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--l-muted); font-weight: 600; margin-bottom: 14px; } .ncard__where svg { width: 14px; height: 14px; flex: none; margin-top: 2px; } .ncard__more { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; font-size: 13.5px; font-weight: 700; color: var(--l-indigo); } .ncard__more svg { width: 15px; height: 15px; transition: transform .2s ease; } .ncard:hover .ncard__more svg { transform: translateX(3px); } /* ---------------------------------------------------------- detail */ .storyhead { max-width: 780px; margin-bottom: 28px; } .storyhead h1 { font-size: clamp(30px, 4.4vw, 50px); font-weight: 900; letter-spacing: -.04em; } .storymeta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px; font-size: 13.5px; color: var(--l-muted); font-weight: 600; } .storymeta span { display: inline-flex; align-items: center; gap: 7px; } .storymeta svg { width: 15px; height: 15px; color: var(--l-indigo); } .storymeta__flag { padding: 4px 12px; border-radius: 99px; background: var(--l-accent); color: var(--l-on-accent); font-weight: 800; font-size: 12px; } .storymeta__flag--past { background: var(--l-lav); color: var(--l-indigo); } /* Lives inside the text column now, so it needs a gentler cap and the column's own radius. */ /* Show the whole picture — never crop it. The box hugs the image rather than letterboxing it: `width:auto` keeps the natural ratio, max-width stops a wide shot overflowing the column, max-height stops a portrait running away, and neither ever upscales a small upload. */ .storyimg { display: block; width: auto; height: auto; max-width: 100%; max-height: 70vh; margin: 0 auto 26px; border-radius: var(--l-r); } .storygrid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 32px; align-items: start; } .storylead { font-size: 18px; line-height: 1.6; color: var(--l-ink-2); font-weight: 600; margin-bottom: 22px; } .storytext { font-size: 15.5px; line-height: 1.75; color: var(--l-ink-2); } .storyside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; } .storycta { padding: 26px 24px; border-radius: var(--l-r); background: var(--l-lav); } .storycta h3 { font-size: 19px; margin-bottom: 9px; } .storycta p { font-size: 13.8px; color: var(--l-ink-2); line-height: 1.6; margin-bottom: 18px; } .storymore { border: 1.5px solid var(--l-line); border-radius: var(--l-r); padding: 22px 20px; } .storymore h4 { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--l-muted); margin-bottom: 16px; } .storymore__row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--l-line); } .storymore__row:last-child { border-bottom: 0; padding-bottom: 0; } .storymore__row img, .storymore__ico { width: 54px; height: 44px; flex: none; border-radius: 10px; object-fit: cover; } .storymore__ico { display: grid; place-items: center; background: var(--l-lav); color: var(--l-indigo); } .storymore__row b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.35; } .storymore__row i { display: block; font-style: normal; font-size: 12px; color: var(--l-muted); margin-top: 3px; } .storymore__row:hover b { color: var(--l-indigo); } /* home-page teaser strip */ .newsrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 1020px) { .ngrid, .newsrow { grid-template-columns: repeat(2, 1fr); } .storygrid { grid-template-columns: 1fr; } .storyside { position: static; } } @media (max-width: 720px) { .ngrid, .newsrow { grid-template-columns: 1fr; } .storyimg { max-height: 60vh; margin-bottom: 20px; } } /* ===================================================================== Application wizard on the public site. includes/onboard_form.php is shared with the staff panel, so it carries theme.css class names. Rather than fork the markup, these rules re-skin those same names in the website's language when the page is .landing. ===================================================================== */ /* ---------------------------------------------------------- surfaces */ .landing .card { background: #fff; border: 1.5px solid var(--l-line); border-radius: var(--l-r); padding: 26px; } .landing .grid { display: grid; gap: 13px; } /* ------------------------------------------------------------ wizard */ .landing .wizard { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 22px; align-items: start; } .landing .steprail { position: sticky; top: 96px; padding: 22px 18px; align-self: start; } .landing .steprail__bar { position: relative; } /* Public rail carries a single-line label, so centre it on the dot. */ .landing .steprail__item { position: relative; display: flex; align-items: center; gap: 13px; padding-bottom: 20px; } .landing .steprail__item:last-child { padding-bottom: 0; } .landing .steprail__item::before { content: ''; position: absolute; left: 16px; top: 34px; bottom: 2px; width: 2px; background: var(--l-line); border-radius: 2px; } .landing .steprail__item:last-child::before { display: none; } .landing .steprail__dot { width: 33px; height: 33px; flex: none; z-index: 1; display: grid; place-items: center; border-radius: 11px; background: #fff; color: var(--l-faint); border: 1.5px solid var(--l-line); font-size: 12.5px; font-weight: 800; transition: all .22s ease; } .landing .steprail__dot svg { width: 16px; height: 16px; } .landing .steprail__t { font-size: 13.4px; font-weight: 700; color: var(--l-muted); line-height: 1.3; } .landing .steprail__s { font-size: 11px; color: var(--l-muted); font-weight: 600; margin-top: 1px; } .landing .steprail__item.is-current .steprail__dot { background: var(--l-accent); color: var(--l-on-accent); border-color: transparent; } .landing .steprail__item.is-current .steprail__t { color: var(--l-ink); } .landing .steprail__item.is-done .steprail__dot { background: var(--l-lav); color: var(--l-indigo); border-color: transparent; } .landing .steprail__item.is-done .steprail__t { color: var(--l-ink-2); } .landing .steprail__item.is-done::before { background: var(--l-indigo); opacity: .3; } .landing .progressline { height: 6px; border-radius: 99px; background: var(--l-lav); overflow: hidden; } .landing .progressline i { display: block; height: 100%; border-radius: 99px; background: var(--l-accent); transition: width .35s cubic-bezier(.4, 0, .2, 1); } .landing .step { display: none; animation: lfade .3s ease; } .landing .step.is-active { display: block; } @keyframes lfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .landing .step__head { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--l-line); } .landing .step__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--l-accent); margin-bottom: 8px; } .landing .step__title { font-size: 25px; font-weight: 800; letter-spacing: -.035em; } .landing .step__desc { font-size: 14px; color: var(--l-muted); margin-top: 8px; line-height: 1.6; } .landing .section { margin-bottom: 28px; } .landing .section__title { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--l-ink-2); margin-bottom: 16px; } .landing .section__title svg { width: 17px; height: 17px; color: var(--l-indigo); flex: none; } .landing .section__title::after { content: ''; flex: 1; height: 1px; background: var(--l-line); } /* ------------------------------------------------------------ fields */ .landing .col2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; } .landing .col3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; } .landing .col4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 18px; } .landing .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; } .landing .field > label { font-size: 13px; font-weight: 700; color: var(--l-ink-2); display: flex; align-items: center; gap: 6px; } .landing .req { color: var(--l-accent-d); font-weight: 800; } .landing .hint { font-size: 12px; color: var(--l-muted); font-weight: 500; line-height: 1.5; } .landing .inp { width: 100%; font: inherit; font-size: 14.5px; padding: 12px 15px; border-radius: 12px; border: 1.5px solid var(--l-line); background: #fff; color: var(--l-ink); outline: none; transition: border-color .16s ease, box-shadow .16s ease; } .landing .inp::placeholder { color: var(--l-faint); } .landing .inp:focus { border-color: var(--l-indigo); box-shadow: 0 0 0 4px rgba(45, 23, 156, .12); } .landing textarea.inp { resize: vertical; min-height: 96px; line-height: 1.6; } .landing select.inp { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f6b87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .landing .inp.is-invalid { border-color: var(--l-accent-d); box-shadow: 0 0 0 4px rgba(214, 58, 18, .13); } .landing .inp::-webkit-datetime-edit-fields-wrapper { padding-top: 0; padding-bottom: 0; } .landing .err { display: none; font-size: 12.5px; font-weight: 700; color: var(--l-accent-d); } .landing .err.is-shown { display: block; } .landing .inputgroup { position: relative; } .landing .inputgroup > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--l-muted); pointer-events: none; } .landing .inputgroup > svg ~ .inp { padding-left: 42px; } .landing .inputgroup .suffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 12.5px; font-weight: 700; color: var(--l-muted); } /* -------------------------------------------------- checks and radios */ .landing .check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; user-select: none; } .landing .check input { position: absolute; opacity: 0; width: 0; height: 0; } .landing .check__box { width: 21px; height: 21px; flex: none; margin-top: 1px; border: 1.8px solid var(--l-line); border-radius: 7px; background: #fff; display: grid; place-items: center; transition: background .16s ease, border-color .16s ease; } .landing .check__box svg { width: 13px; height: 13px; color: var(--l-on-accent); opacity: 0; transform: scale(.5); transition: opacity .16s ease, transform .16s ease; } .landing .check input:checked + .check__box { background: var(--l-accent); border-color: transparent; } .landing .check input:checked + .check__box svg { opacity: 1; transform: scale(1); } .landing .check__text { font-size: 14px; color: var(--l-ink-2); line-height: 1.55; } .landing .radiocards { display: grid; gap: 12px; } .landing .radiocard { position: relative; display: flex; align-items: flex-start; gap: 13px; padding: 15px 17px; border: 1.5px solid var(--l-line); border-radius: 16px; background: #fff; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; } .landing .radiocard:hover { border-color: var(--l-indigo); transform: translateY(-1px); } .landing .radiocard input { position: absolute; opacity: 0; width: 0; height: 0; } .landing .radiocard__ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--l-lav); color: var(--l-indigo); transition: inherit; } .landing .radiocard__ico svg { width: 19px; height: 19px; } .landing .radiocard__t { font-size: 14.5px; font-weight: 700; } .landing .radiocard__d { font-size: 12.5px; color: var(--l-muted); margin-top: 2px; line-height: 1.45; } .landing .radiocard__tick { margin-left: auto; width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1.8px solid var(--l-line); display: grid; place-items: center; align-self: center; } .landing .radiocard__tick::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--l-accent); transform: scale(0); transition: transform .18s ease; } .landing .radiocard input:checked ~ .radiocard__tick { border-color: var(--l-accent); } .landing .radiocard input:checked ~ .radiocard__tick::after { transform: scale(1); } .landing .radiocard:has(input:checked) { border-color: var(--l-accent); background: #fff8f5; } .landing .radiocard:has(input:checked) .radiocard__ico { background: var(--l-accent); color: var(--l-on-accent); } /* ------------------------------------------------------ service tiles */ .landing .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; } .landing .tile { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 15px; border: 1.5px solid var(--l-line); border-radius: 16px; background: #fff; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; } .landing .tile:hover { transform: translateY(-2px); border-color: var(--l-indigo); } .landing .tile input { position: absolute; opacity: 0; width: 0; height: 0; } .landing .tile__ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--l-lav); color: var(--l-indigo); transition: inherit; } .landing .tile__ico svg { width: 18px; height: 18px; } .landing .tile__t { font-size: 13.2px; font-weight: 600; color: var(--l-ink-2); line-height: 1.35; } .landing .tile:has(input:checked) { border-color: var(--l-accent); background: #fff8f5; } .landing .tile:has(input:checked) .tile__ico { background: var(--l-accent); color: var(--l-on-accent); } .landing .tile:has(input:checked) .tile__t { color: var(--l-ink); font-weight: 700; } /* ----------------------------------------------------- yes/no + rows */ .landing .qrow { display: flex; align-items: center; gap: 18px; padding: 14px 4px; border-bottom: 1px solid var(--l-line); } .landing .qrow:last-child { border-bottom: 0; } .landing .qrow__text { font-size: 13.8px; color: var(--l-ink-2); line-height: 1.55; flex: 1; min-width: 0; } .landing .yesno { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--l-lav-2); flex: none; } .landing .yesno label { position: relative; cursor: pointer; } .landing .yesno input { position: absolute; opacity: 0; width: 0; height: 0; } .landing .yesno span { display: block; padding: 6px 17px; border-radius: 99px; font-size: 12.5px; font-weight: 700; color: var(--l-muted); transition: background .18s ease, color .18s ease; } .landing .yesno input:checked + span { color: #fff; } .landing .yesno label.y input:checked + span { background: var(--l-accent); } .landing .yesno label.n input:checked + span { background: var(--l-muted); } /* -------------------------------------------------------- attachments */ .landing .drop { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px dashed var(--l-line); border-radius: 16px; background: #fff; cursor: pointer; transition: border-color .18s ease, background .18s ease; } .landing .drop:hover, .landing .drop.is-over { border-color: var(--l-indigo); background: var(--l-lav-2); } .landing .drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .landing .drop__ico { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 13px; background: var(--l-lav); color: var(--l-indigo); } .landing .drop__t { font-size: 13.8px; font-weight: 700; } .landing .drop__d { font-size: 12px; color: var(--l-muted); margin-top: 2px; } .landing .drop__file { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--l-indigo); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --------------------------------------------------- repeatable rows */ .landing .repeat { display: flex; flex-direction: column; gap: 16px; } .landing .repeat__item { position: relative; padding: 20px 18px 4px; border: 1.5px solid var(--l-line); border-radius: 16px; background: var(--l-lav-2); } .landing .repeat__badge { position: absolute; top: -11px; left: 18px; padding: 3px 12px; border-radius: 99px; background: var(--l-accent); color: var(--l-on-accent); font-size: 11px; font-weight: 700; letter-spacing: .03em; } .landing .repeat__del { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 9px; background: #fff; color: var(--l-muted); cursor: pointer; transition: background .16s ease, color .16s ease; } .landing .repeat__del:hover { background: var(--l-accent); color: var(--l-on-accent); } .landing .repeat__del svg { width: 15px; height: 15px; } /* ------------------------------------------------------------ buttons */ .landing .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border: 1.5px solid transparent; border-radius: 99px; font: inherit; font-size: 14px; font-weight: 700; letter-spacing: -.01em; cursor: pointer; white-space: nowrap; transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease; } .landing .btn svg { width: 16px; height: 16px; } .landing .btn:disabled { opacity: .45; cursor: not-allowed; } .landing .btn--primary { background: var(--l-accent); color: var(--l-on-accent); } .landing .btn--primary:hover:not(:disabled) { background: var(--l-accent-d); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(214, 58, 18, .4); } .landing .btn--ghost { background: #fff; color: var(--l-ink); border-color: var(--l-line); } .landing .btn--ghost:hover:not(:disabled) { border-color: var(--l-ink); transform: translateY(-2px); } .landing .btn--soft { background: var(--l-lav); color: var(--l-indigo); } .landing .btn--soft:hover:not(:disabled) { background: var(--l-indigo); color: #fff; } .landing .btn--block { width: 100%; } .landing .formfoot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--l-line); } .landing .formfoot .spacer { flex: 1; } /* -------------------------------------------------------------- misc */ .landing .alert { display: flex; align-items: flex-start; gap: 12px; padding: 15px 19px; border-radius: 14px; margin-bottom: 22px; font-size: 14px; font-weight: 600; line-height: 1.55; } .landing .alert svg { width: 19px; height: 19px; flex: none; margin-top: 1px; } .landing .alert--danger { background: #fdece9; color: #a82c12; } .landing .alert--success { background: #e9f9ea; color: #1c7a34; } .landing .alert--warn { background: #fdf3e2; color: #8a5200; } .landing .alert--info { background: var(--l-lav); color: var(--l-indigo); } .landing .kv { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 10px 20px; font-size: 14px; } .landing .kv dt { color: var(--l-muted); font-weight: 600; } .landing .kv dd { margin: 0; color: var(--l-ink); font-weight: 600; } .landing .mb16 { margin-bottom: 16px; } .landing .mt16 { margin-top: 16px; } .landing .mb0 { margin-bottom: 0; } .landing .tac { text-align: center; } @media (max-width: 1020px) { .landing .wizard { grid-template-columns: minmax(0, 1fr); } .landing .steprail { position: static; padding: 6px 0 0; } .landing .steprail__bar { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 12px; } .landing .steprail__item { flex-direction: column; align-items: center; text-align: center; padding: 0 4px; min-width: 84px; } .landing .steprail__item::before { left: 50%; right: -50%; top: 16px; bottom: auto; width: auto; height: 2px; transform: translateX(16px); } .landing .steprail__s { display: none; } .landing .steprail__t { font-size: 11.5px; } .landing .col4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .landing .col2, .landing .col3, .landing .col4 { grid-template-columns: minmax(0, 1fr); } .landing .card { padding: 20px 17px; } .landing .kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; } .landing .kv dd { margin-bottom: 12px; } } /* ===================================================================== Sign in, and the short notice pages either side of applying ===================================================================== */ .authsec { padding-block: 56px 76px; } .authgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: stretch; max-width: 940px; margin: 0 auto; } .authcard { border: 1.5px solid var(--l-line); border-radius: var(--l-r-lg); padding: 40px 38px; background: #fff; } .authcard h1 { font-size: clamp(28px, 3.4vw, 38px); font-weight: 900; letter-spacing: -.04em; } .authcard__lead { font-size: 14.5px; color: var(--l-muted); margin: 12px 0 28px; line-height: 1.6; } /* the indigo panel beside the form */ .authside { position: relative; overflow: hidden; border-radius: var(--l-r-lg); background: linear-gradient(150deg, #2d179c 0%, #4a26d8 55%, #7b3fe4 100%); color: #fff; } .authside__orb { position: absolute; right: -30%; top: -34%; width: 66%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #ffd08a 0%, var(--l-orange) 40%, var(--l-orange-2) 66%, rgba(245, 64, 27, 0) 74%); opacity: .9; pointer-events: none; } .authside__body { position: relative; z-index: 1; padding: 44px 38px; height: 100%; display: flex; flex-direction: column; } .authside h2 { color: #fff; font-size: 27px; letter-spacing: -.035em; } .authside p { font-size: 14.5px; color: rgba(255, 255, 255, .76); margin-top: 14px; line-height: 1.65; } .authside__list { display: flex; flex-direction: column; gap: 18px; margin-top: 34px; } .authside__list li { display: flex; align-items: center; gap: 14px; font-size: 14.5px; font-weight: 600; line-height: 1.45; } .authside__list li > span { padding-block: 2px; } /* White on the indigo, in a soft chip so the glyph still reads as an icon. */ .authside__list svg { width: 34px; height: 34px; flex: none; padding: 8px; border-radius: 10px; box-sizing: border-box; background: rgba(255, 255, 255, .16); color: #fff; } .authside__foot { margin-top: auto; padding-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .authside__foot span { font-size: 13.5px; color: rgba(255, 255, 255, .76); font-weight: 600; } /* single-column notice pages: application received, pending approval */ .authnote { max-width: 620px; margin: 0 auto; border: 1.5px solid var(--l-line); border-radius: var(--l-r-lg); padding: 40px 38px; background: #fff; } .authnote h1 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 900; letter-spacing: -.04em; } .authnote .hint { font-size: 14.5px; color: var(--l-muted); line-height: 1.6; } .authnote .section { margin: 30px 0; } .authnote .section__title { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; font-size: 12.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--l-ink-2); } .authnote .section__title svg { width: 17px; height: 17px; color: var(--l-indigo); flex: none; } /* the reference callout and progress track already exist — retone them */ .refbox { padding: 18px 22px; border-radius: 18px; border: 1.5px dashed var(--l-accent); background: #fff8f5; text-align: center; } .refbox__l { font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--l-accent-d); } .refbox__v { font-size: 23px; font-weight: 900; letter-spacing: -.03em; margin-top: 5px; color: var(--l-ink); } .track { display: flex; align-items: flex-start; gap: 0; } .track__step { flex: 1; text-align: center; position: relative; } .track__step::before { content: ''; position: absolute; top: 17px; left: -50%; right: 50%; height: 2px; background: var(--l-line); } .track__step:first-child::before { display: none; } .track__step.is-done::before { background: var(--l-indigo); opacity: .35; } .track__dot { position: relative; z-index: 1; width: 36px; height: 36px; margin: 0 auto 9px; display: grid; place-items: center; border-radius: 12px; background: #fff; border: 1.5px solid var(--l-line); color: var(--l-faint); } .track__dot svg { width: 17px; height: 17px; } .track__step.is-done .track__dot { background: var(--l-lav); border-color: transparent; color: var(--l-indigo); } .track__step.is-current .track__dot { background: var(--l-accent); border-color: transparent; color: var(--l-on-accent); } .track__t { font-size: 12.5px; font-weight: 700; color: var(--l-ink-2); } .track__d { font-size: 11.5px; color: var(--l-muted); margin-top: 2px; } .medallion { width: 84px; height: 84px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 27px; } .medallion svg { width: 36px; height: 36px; } .medallion--ok { background: var(--l-accent); color: var(--l-on-accent); } .medallion--wait { background: var(--l-lav); color: var(--l-indigo); } .medallion--stop { background: #fdece9; color: #a82c12; } .medallion--violet { background: var(--l-lav); color: var(--l-indigo); } @media (max-width: 900px) { .authgrid { grid-template-columns: minmax(0, 1fr); max-width: 560px; } .authside { order: -1; } .authside__body { padding: 32px 28px; } .authside__list { margin-top: 22px; } .authside__foot { padding-top: 24px; } } @media (max-width: 620px) { .authcard, .authnote { padding: 30px 24px; } .track { flex-direction: column; gap: 16px; } .track__step { display: flex; align-items: center; gap: 12px; text-align: left; } .track__step::before { display: none; } .track__dot { margin: 0; } } /* The application page stacks a header, a how-to strip, the wizard and a footnote — one flow, one rhythm, all sharing the same content column. */ .landing .applyflow { display: flex; flex-direction: column; gap: 32px; } /* Needs to outrank component margins (e.g. .landing .alert) so the flex gap is the single source of vertical rhythm here. */ .landing .applyflow > * { margin-block: 0; } @media (max-width: 720px) { .landing .applyflow { gap: 24px; } }