/* ============================================================ FundXavvy — Singapore loan advisory Palette : deep forest + warm sand, one amber accent Display : Zodiak Body : Hubot Sans Data/labels : IBM Plex Mono ============================================================ */ :root{ --ink: #0F1C17; --forest: #1B3A2E; --moss: #4E6F5C; --sand: #EBE4D6; --paper: #F6F2E9; --amber: #C97F35; --amber-lt: #E2A85F; /* The colour the hero scrim lands on at its last stop. Contact starts on exactly this, so the two dark panels read as one band instead of two near-misses butting together. If you retune either gradient, retune both to this value. */ --seam: #101E19; --display: "Zodiak", "Iowan Old Style", Georgia, serif; --body: "Hubot Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --wrap: 1240px; --pad: clamp(1.25rem, 5vw, 4rem); --sec: clamp(5rem, 11vh, 9rem); --ease: cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--sand); color:var(--ink); font-family:var(--body); font-size:clamp(1rem,.96rem + .2vw,1.0625rem); line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* Text selection, in the brand green rather than the browser's default blue. Forest reads on the sand and paper sections. Over the dark panels it would be nearly the same value as the background, so those get moss, which is light enough to show what is selected while still being the same family. Note ::selection cannot be grouped with ::-moz-selection in one rule: an unrecognised selector invalidates the whole list. */ ::selection{ background:var(--forest); color:var(--paper); } ::-moz-selection{ background:var(--forest); color:var(--paper); } .hero ::selection, .contact ::selection, .foot ::selection{ background:var(--moss); color:var(--paper); } .hero ::-moz-selection, .contact ::-moz-selection, .foot ::-moz-selection{ background:var(--moss); color:var(--paper); } img,video,svg{ display:block; max-width:100%; } a{ color:inherit; } ul{ margin:0; padding:0; list-style:none; } .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); } .skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--forest); color:var(--paper); padding:.75rem 1.25rem; font:500 .875rem/1 var(--body); } .skip:focus{ left:0; } :focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; } /* ---------- shared type ---------- */ .eyebrow{ margin:0 0 1.5rem; font-family:var(--mono); font-size:.6875rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--moss); } .eyebrow--light{ color:rgba(246,242,233,.72); } .h2{ margin:0; font-family:var(--display); font-weight:400; font-size:clamp(2rem,1.35rem + 2.7vw,3.4rem); line-height:1.08; letter-spacing:-.02em; color:var(--forest); } .h2--light{ color:var(--paper); } /* Justified body copy. Hyphenation is not optional here: without it, justifying a column this narrow stretches word spacing into visible rivers. `lang` is set on , which is what lets the browser hyphenate at all. Headings, labels, chips and links stay ragged. */ .hero__sub, .why__prose p, .svc__lede, .contact__lede, .foot__legal p{ text-align:justify; -webkit-hyphens:auto; hyphens:auto; } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:.6rem; padding:1rem 1.6rem; background:var(--forest); color:var(--paper); font-family:var(--body); font-size:.9375rem; font-weight:500; letter-spacing:.005em; text-decoration:none; border:0; border-radius:2px; cursor:pointer; transition:background .3s var(--ease), transform .3s var(--ease); } .btn:hover{ background:var(--ink); } .btn__arrow{ transition:transform .3s var(--ease); } .btn:hover .btn__arrow{ transform:translateX(4px); } .btn--amber{ background:var(--amber); color:#170F05; } .btn--amber:hover{ background:var(--amber-lt); } .btn--sm{ padding:.6rem 1.1rem; font-size:.8125rem; } .btn--full{ width:100%; justify-content:center; margin-top:.5rem; } /* ============================================================ NAV ============================================================ */ .nav{ position:fixed; inset:0 0 auto; z-index:100; transition:background .4s var(--ease), box-shadow .4s var(--ease); } .nav--stuck{ background:rgba(27,58,46,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 1px 0 rgba(246,242,233,.12); } .nav__inner{ max-width:var(--wrap); margin-inline:auto; padding:1.15rem var(--pad); display:flex; align-items:center; gap:2rem; } .brand{ display:flex; align-items:center; text-decoration:none; color:var(--paper); margin-right:auto; } .brand__logo{ height:22px; width:auto; } .brand--foot .brand__logo{ height:26px; } .nav__links{ display:flex; gap:2.1rem; } .nav__links a{ font-size:.875rem; text-decoration:none; color:rgba(246,242,233,.78); padding-bottom:3px; background-image:linear-gradient(var(--amber),var(--amber)); background-size:0 1px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .35s var(--ease), color .25s var(--ease); } .nav__links a:hover{ color:var(--paper); background-size:100% 1px; } .nav .btn--sm{ background:rgba(246,242,233,.1); color:var(--paper); box-shadow:inset 0 0 0 1px rgba(246,242,233,.3); } .nav .btn--sm:hover{ background:var(--paper); color:var(--forest); } .burger{ display:none; background:none; border:0; padding:.5rem; cursor:pointer; } .burger span{ display:block; width:22px; height:1.5px; background:var(--paper); transition:transform .3s var(--ease), opacity .3s var(--ease); } .burger span+span{ margin-top:6px; } .burger[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); } .burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); } .mobilenav{ display:none; } /* ============================================================ HERO ============================================================ */ .hero{ position:relative; min-height:min(100svh,860px); display:flex; flex-direction:column; justify-content:flex-end; padding:9rem 0 0; color:var(--paper); isolation:isolate; background:var(--forest); } .hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; } .hero__video{ width:100%; height:100%; object-fit:cover; filter:saturate(.7) brightness(.85) contrast(1.06); } /* The footage is exposure-stable across its 15s loop (peak luminance ~215 at every frame), so the scrim is tuned once rather than padded for a worst case that never arrives. The diagonal does the work: opaque under the copy column, released past ~66% so the skyline reads as a skyline on the right. The vertical anchors the lender strip and, in its last 10%, closes to fully opaque --seam. That last stop is not decoration: the contact panel below opens on the same colour, and without it the hero's bottom edge would shift with whatever frame the video happens to be on. */ .hero__scrim{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(15,28,23,.60) 0%, rgba(15,28,23,.22) 22%, rgba(15,28,23,.48) 58%, rgba(16,30,25,.90) 90%, var(--seam) 100%), linear-gradient(100deg, rgba(15,28,23,.88) 0%, rgba(15,28,23,.70) 42%, rgba(27,58,46,.28) 66%, rgba(27,58,46,.06) 100%); } .hero__body{ width:100%; max-width:var(--wrap); margin-inline:auto; padding:0 var(--pad) clamp(3rem,7vh,5rem); flex:1; display:flex; flex-direction:column; justify-content:flex-end; } .hero__title{ margin:0; font-family:var(--display); font-weight:400; /* Scaled to the longest line, "The banker on your side" at 23 characters. If the headline is ever reworded longer than that, re-measure: the clause breaks are hand-set spans, so an overlong line wraps into a third ragged one rather than rebalancing. */ font-size:clamp(2.2rem,1.2rem + 4.5vw,5.2rem); line-height:.98; letter-spacing:-.032em; max-width:19ch; } .hero__title span{ display:block; } .hero__sub{ margin:1.75rem 0 0; max-width:50ch; font-size:clamp(1rem,.95rem + .32vw,1.1875rem); line-height:1.62; color:rgba(246,242,233,.84); } .hero__actions{ margin-top:2.5rem; display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem 2rem; } /* lender strip */ .lenders{ position:relative; width:100%; max-width:var(--wrap); margin-inline:auto; padding:1.6rem var(--pad) 2rem; border-top:1px solid rgba(246,242,233,.18); display:flex; flex-wrap:wrap; align-items:baseline; gap:.9rem 2.4rem; } .lenders__label{ margin:0; font-family:var(--mono); font-size:.625rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:rgba(246,242,233,.55); } .lenders__list{ display:flex; flex-wrap:wrap; gap:.6rem 2.2rem; } .lenders__list li{ font-family:var(--display); font-weight:700; font-size:clamp(.9375rem,.88rem + .28vw,1.125rem); letter-spacing:-.01em; color:rgba(246,242,233,.9); } /* ============================================================ SIGNATURE — THE APPROVAL GAP ============================================================ */ .gap{ padding-block:var(--sec); background:var(--sand); } /* Argument left, image right. Near-even rather than text-dominant: the prose is only three short paragraphs, and a narrow image column reads as decoration instead of weight. */ .why{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,4.5rem); align-items:center; } .why__fig{ margin:0; overflow:hidden; border-radius:3px; } .why__fig img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; } /* Full section-heading scale now that the display lead below it is gone. At the old sub-heading size the column opened too quietly to hold its own beside the image. */ .why__head{ margin:0 0 1.75rem; font-family:var(--display); font-weight:400; font-size:clamp(2rem,1.35rem + 2.7vw,3.4rem); line-height:1.08; letter-spacing:-.02em; color:var(--forest); } .why__prose{ max-width:62ch; display:grid; gap:1.1rem; } .why__prose p{ margin:0; font-size:1.0625rem; line-height:1.65; color:#33473D; } /* The closing paragraph is the answer to the two above it, so it is set apart rather than left as a third indistinguishable block. */ .why__prose p:last-child{ margin-top:.4rem; padding-top:1.25rem; border-top:1px solid rgba(27,58,46,.16); color:var(--forest); } /* ============================================================ SERVICES ============================================================ */ .svcs{ padding-block:var(--sec); background:var(--paper); } .svcs__head{ margin-bottom:clamp(2.5rem,5vh,4rem); } /* The eyebrow is the section's only heading now that the h2 is gone, so it is sized up a step. Its own bottom margin goes, since nothing sits under it inside the head any more. */ .svcs__head .eyebrow{ margin:0; font-size:.8125rem; letter-spacing:.18em; } /* The list reads as three rules with a name on each. Everything else is behind an open. */ .svcs__list{ list-style:none; margin:0; padding:0; } .svc{ border-top:1px solid rgba(27,58,46,.16); } .svc:last-child{ border-bottom:1px solid rgba(27,58,46,.16); } /* The h3 only carries the outline level. All the type is on the button inside it. */ .svc__h{ margin:0; font-size:inherit; font-weight:inherit; } .svc__head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:clamp(1.4rem,3vh,2rem) 0; font:inherit; color:inherit; text-align:left; background:none; border:0; cursor:pointer; } .svc__head:focus-visible{ outline:2px solid var(--amber); outline-offset:4px; } /* Underline is a background rather than a border so it can grow from the left instead of appearing all at once, and so it hugs the text rather than the full button width. */ .svc__title{ padding-bottom:.1em; font-family:var(--display); font-weight:400; font-size:clamp(1.375rem,1.1rem + 1.35vw,2.125rem); line-height:1.15; letter-spacing:-.022em; color:var(--forest); background-image:linear-gradient(var(--amber),var(--amber)); background-repeat:no-repeat; background-position:0 100%; background-size:0 2px; transition:background-size .45s var(--ease); } .svc__arrow{ flex:none; font-size:1.25rem; line-height:1; color:var(--moss); transition:transform .45s var(--ease), color .3s var(--ease); } /* 0fr to 1fr animates a row to its own content height with no JS measuring. The overflow has to sit on the inner element, not the grid, or the row will not actually clip. */ .svc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); } .svc__panelinner{ overflow:hidden; /* Delayed so the panel is out of the accessibility tree once it has finished closing, but visible the instant it starts opening. */ visibility:hidden; transition:visibility 0s linear .45s; } .svc__body{ padding-bottom:clamp(1.5rem,3.2vh,2.25rem); opacity:0; transform:translateY(6px); transition:opacity .35s var(--ease) .06s, transform .35s var(--ease) .06s; } .svc.is-open .svc__panel{ grid-template-rows:1fr; } .svc.is-open .svc__panelinner{ visibility:visible; transition-delay:0s; } .svc.is-open .svc__body{ opacity:1; transform:none; } .svc.is-open .svc__title{ background-size:100% 2px; } .svc.is-open .svc__arrow{ transform:rotate(90deg); color:var(--amber); } /* Hover opens it on anything with a real pointer. Keyboard users get the same via focus-within. Touch has neither, which is what the click handler in script.js covers. */ @media (hover:hover) and (pointer:fine){ .svc:hover .svc__panel, .svc:focus-within .svc__panel{ grid-template-rows:1fr; } .svc:hover .svc__panelinner, .svc:focus-within .svc__panelinner{ visibility:visible; transition-delay:0s; } .svc:hover .svc__body, .svc:focus-within .svc__body{ opacity:1; transform:none; } .svc:hover .svc__title, .svc:focus-within .svc__title{ background-size:100% 2px; } .svc:hover .svc__arrow, .svc:focus-within .svc__arrow{ transform:rotate(90deg); color:var(--amber); } } .tag{ margin:0 0 .75rem; font-family:var(--mono); font-size:.625rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); } .svc__lede{ margin:0; font-size:1.0625rem; line-height:1.6; color:#33473D; max-width:52ch; } .chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem; } .chips li{ padding:.35rem .75rem; font-family:var(--mono); font-size:.6875rem; letter-spacing:.03em; color:var(--forest); box-shadow:inset 0 0 0 1px rgba(27,58,46,.2); border-radius:2px; } /* ============================================================ CONTACT ============================================================ */ /* Contact now sits directly under the hero, so it is treated as the bottom half of one dark band rather than a second panel. It opens on --seam (the hero's closing colour), holds that for the first tenth so the join has no visible line, then eases open onto the glass before closing again into the hard edge against the sand of About. */ .contact{ position:relative; padding-block:var(--sec); color:var(--paper); isolation:isolate; background:var(--seam); } .contact__bg{ position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, var(--seam) 0%, rgba(16,30,25,.97) 10%, rgba(16,30,25,.62) 48%, rgba(16,30,25,.92) 100%), /* Left-weighted, because the enquiry copy sits in the first column and the form in the second brings its own translucent panel. */ linear-gradient(90deg, rgba(15,28,23,.62) 0%, rgba(15,28,23,.30) 55%, rgba(15,28,23,.06) 100%), url("assets/glass.jpg") center/cover no-repeat; } /* glass.webp is 76% lighter than the jpg for the same picture. The whole declaration is repeated rather than patched, because a browser that cannot parse image-set() discards the entire value: patch just the photo layer and the scrims would disappear with it, leaving white text on a bare image. The @supports test keeps old browsers on the block above. Both the Why and this rule must point at the same format, or the page downloads the webp and the jpg instead of one of them. */ @supports (background-image: image-set(url("assets/glass.webp") type("image/webp"))){ .contact__bg{ background: linear-gradient(180deg, var(--seam) 0%, rgba(16,30,25,.97) 10%, rgba(16,30,25,.62) 48%, rgba(16,30,25,.92) 100%), linear-gradient(90deg, rgba(15,28,23,.62) 0%, rgba(15,28,23,.30) 55%, rgba(15,28,23,.06) 100%), image-set(url("assets/glass.webp") type("image/webp"), url("assets/glass.jpg") type("image/jpeg")) center/cover no-repeat; } } .contact__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(2.5rem,5vw,5rem); align-items:start; } .contact__lede{ margin:1.5rem 0 0; max-width:44ch; color:rgba(246,242,233,.82); font-size:clamp(1rem,.96rem + .25vw,1.125rem); } .contact__direct{ margin-top:2.5rem; max-width:26rem; } .contact__direct li{ display:flex; align-items:baseline; gap:1rem; padding:.9rem 0; border-top:1px solid rgba(246,242,233,.16); } .contact__direct li:first-child{ border-top:0; } .contact__direct span{ flex:none; width:5.5rem; font-family:var(--mono); font-size:.625rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:rgba(246,242,233,.5); } .contact__direct a{ margin:0; font-size:1rem; text-decoration:none; color:var(--paper); } .contact__direct a:hover{ color:var(--amber-lt); } /* form */ .form{ padding:clamp(1.5rem,3vw,2.25rem); background:rgba(15,28,23,.34); box-shadow:inset 0 0 0 1px rgba(246,242,233,.18); backdrop-filter:blur(16px) saturate(.9); -webkit-backdrop-filter:blur(16px) saturate(.9); border-radius:3px; display:grid; gap:1.1rem; } .hp{ display:none; } .field{ display:grid; gap:.45rem; } /* display:grid above would otherwise beat the UA sheet's [hidden]{display:none} and leave the conditional "Others" field on screen. */ .field[hidden]{ display:none; } .field-pair{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; } .field label{ font-family:var(--mono); font-size:.625rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:rgba(246,242,233,.62); } .field input, .field select, .field textarea{ width:100%; padding:.8rem .9rem; font-family:var(--body); font-size:.9688rem; color:var(--paper); background:rgba(15,28,23,.42); border:1px solid rgba(246,242,233,.22); border-radius:2px; transition:border-color .25s var(--ease), background .25s var(--ease); } .field textarea{ resize:vertical; min-height:6.5rem; } .field select{ appearance:none; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,rgba(246,242,233,.6) 50%),linear-gradient(135deg,rgba(246,242,233,.6) 50%,transparent 50%); background-position:calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; } .field select option{ background:var(--forest); color:var(--paper); } .field input::placeholder, .field textarea::placeholder{ color:rgba(246,242,233,.38); } .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--amber); background:rgba(15,28,23,.6); } .field :user-invalid{ border-color:#D08A6E; } .form__note{ margin:0; font-size:.75rem; line-height:1.5; color:rgba(246,242,233,.5); } .form__status{ margin:0; font-size:.875rem; color:var(--amber-lt); } .form__status:empty{ display:none; } /* ============================================================ FOOTER ============================================================ */ .foot{ background:var(--forest); color:var(--paper); padding-top:clamp(3rem,6vh,4.5rem); } .foot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; padding-bottom:clamp(2.5rem,5vh,3.5rem); } .brand--foot{ margin-right:0; } .foot__tag{ margin:1rem 0 0; font-size:.9375rem; color:rgba(246,242,233,.6); max-width:24ch; } .foot__nav{ display:grid; gap:.7rem; align-content:start; } .foot__nav a, .foot__contact a{ font-size:.9375rem; text-decoration:none; color:rgba(246,242,233,.72); width:fit-content; } .foot__nav a:hover, .foot__contact a:hover{ color:var(--amber-lt); } .foot__contact{ display:grid; gap:.7rem; align-content:start; } .foot__legal{ padding-block:1.5rem 2.25rem; border-top:1px solid rgba(246,242,233,.14); display:grid; gap:.75rem; } .foot__legal p{ margin:0; font-size:.75rem; line-height:1.65; color:rgba(246,242,233,.5); } .foot__disc{ max-width:88ch; } /* ---------- floating WhatsApp ---------- */ .wafloat{ position:fixed; right:clamp(1rem,3vw,1.75rem); bottom:clamp(1rem,3vw,1.75rem); z-index:90; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:#1E8E58; color:#fff; box-shadow:0 10px 26px -8px rgba(15,28,23,.55); transition:transform .3s var(--ease), background .3s var(--ease); } .wafloat svg{ width:26px; height:26px; fill:currentColor; } .wafloat:hover{ transform:translateY(-3px); background:#22A366; } /* ============================================================ REVEAL ============================================================ */ .js .reveal{ opacity:0; transform:translateY(18px); } .js .reveal.is-in{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:960px){ .why{ grid-template-columns:1fr; align-items:start; } /* Capped, or the portrait crop eats most of a phone screen. It also drops below the copy here, so the reasons to hire the firm come first and the image closes the section. */ .why__fig{ max-width:22rem; margin-top:.5rem; } .contact__grid{ grid-template-columns:1fr; } .foot__grid{ grid-template-columns:1fr 1fr; } } @media (max-width:760px){ .nav__links{ display:none; } .nav .btn--sm{ display:none; } .burger{ display:block; } .mobilenav{ display:grid; gap:.25rem; padding:.5rem var(--pad) 1.5rem; background:rgba(27,58,46,.97); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .mobilenav[hidden]{ display:none; } .mobilenav a{ padding:.85rem 0; text-decoration:none; font-family:var(--display); font-size:1.375rem; color:var(--paper); border-bottom:1px solid rgba(246,242,233,.12); } .hero{ min-height:auto; padding-top:7.5rem; } .hero__body{ padding-bottom:3rem; } /* Steeper than the desktop curve so each clause of the headline holds one line down to 320px, otherwise both wrap and the hero becomes four ragged lines. Meets the base scale at the 760px breakpoint, so there is no jump when crossing it. */ .hero__title{ font-size:clamp(1.3rem,6.9vw,4rem); } .lenders{ flex-direction:column; gap:1rem; } .lenders__list{ gap:.5rem 1.4rem; } .field-pair{ grid-template-columns:1fr; } .foot__grid{ grid-template-columns:1fr; gap:2.25rem; } .wafloat{ width:48px; height:48px; } /* Ragged right on phones. Measured at 375px, justifying these columns stretched word spaces to 4.5x the font's natural space width, which reads as rivers running down the paragraph. Hyphenation stays on to keep the ragged edge tight. */ .hero__sub, .why__prose p, .svc__lede, .contact__lede, .foot__legal p{ text-align:left; } } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .js .reveal{ opacity:1; transform:none; } }