/* ========================================================================== PADDIO — brand layer -------------------------------------------------------------------------- Loaded AFTER shared/style.css. Overrides the base palette and typography with the values from the brand guideline. ========================================================================== */ /* -------------------------------------------------------------------------- Typography — Prompt (Cadson Demak, Google Fonts, free) The guideline's own body-text recommendation. Covers Latin AND Thai in one family, so the second font family is dropped entirely. Headline face in the guideline is Preuksa (Cadson Demak, ฿118,128). Desktop licences do not cover @font-face; if a web licence is bought, add it here and point --font-display at it. -------------------------------------------------------------------------- */ /* The Prompt webfont is linked from each page's , NOT imported here. An @import is discovered only after this file has downloaded and parsed, which serialises the font behind the stylesheet and delays first paint. If you add a page that uses this sheet, copy the across too. */ :root { /* ---- 4.1 Primary ---- */ --leaf-deep: #154734; /* Pantone 3435C */ --cream: #F5EBE1; /* Pantone 2309C at 40% */ /* ---- 4.1 Secondary (accent greens) ---- */ --leaf: #008953; /* Pantone 341C */ --green-mid: #00BB7E; /* Pantone 2414C */ --moss: #6FBE59; /* Pantone 360C */ --sage: #ADDC91; /* Pantone 358C */ --lime: #D6E865; /* Pantone 2296C */ /* ---- 4.1 Tertiary (neutrals) ---- */ --warm: #D7C4B6; /* Pantone 4755C */ --muted: #796E65; /* Pantone Warm Grey 10C */ --ink: #212721; /* Pantone Black 3C */ /* Page ground — a light tint of the primary cream (4.2 permits tints) */ --bone: #FDFAF6; --sun: var(--lime); --rust: var(--muted); /* Functional only. The brand palette contains no red, but form validation needs a distinct, accessible error signal. Documented as non-brand; used for error text and invalid field borders only. */ --error: #A8442A; --line: rgba(21, 71, 52, .14); --font-body: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Prompt', -apple-system, sans-serif; } body, html[lang="th"] body { font-family: var(--font-body); } h1, h2, h3, h4, .stat-num, .nav-logo, .brand { font-family: var(--font-display); } /* Prompt runs slightly wider and taller than Inter — tighten to match the original optical density, and relax the Thai overrides that existed only because Noto Sans Thai was a different family. */ h1, h2 { letter-spacing: -.02em; } html[lang="th"] h1, html[lang="th"] h2 { letter-spacing: -.01em; } .hero h1 { letter-spacing: -.03em; } /* -------------------------------------------------------------------------- 4.3 Colour ratio — 50% primary / 40% secondary / 10% tertiary Applied as: deep green and cream carry the page, greens carry accents and interaction, neutrals are used sparingly for type and rules. -------------------------------------------------------------------------- */ .btn-primary { background: var(--leaf); } .btn-primary:hover { background: var(--leaf-deep); } .btn-light { background: #fff; color: var(--leaf-deep); } .btn-light:hover { background: var(--sage); } .nav-cta { background: var(--leaf); } .nav-cta:hover { background: var(--leaf-deep); } .zone::before { background: linear-gradient(90deg, var(--moss), var(--lime)); } .bar-fill { background: linear-gradient(90deg, var(--moss), var(--leaf)); } .bar-fill.alt { background: linear-gradient(90deg, var(--lime), var(--moss)); } .field .err { color: var(--error); } .field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--error); } .field label .req { color: var(--error); } .form-status.err { background: rgba(168, 68, 42, .1); color: var(--error); border-color: rgba(168, 68, 42, .32); } /* TODO flags now use the brand lime rather than the retired gold */ .todo { background: rgba(214, 232, 101, .55); border-bottom-color: var(--leaf); } .todo::after { color: var(--leaf); } .contact::before { background: radial-gradient(circle at 15% 30%, rgba(0, 187, 126, .34), transparent 42%), radial-gradient(circle at 85% 70%, rgba(214, 232, 101, .16), transparent 42%); } .hero h1 em { background: linear-gradient(120deg, var(--sage) 0%, var(--moss) 55%, var(--lime) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .notice { border-left-color: var(--moss); } /* -------------------------------------------------------------------------- Unit plan — retinted onto the brand palette. 4.2 permits tints of the palette colours, which is what these are: sage and lime at low opacity over the cream ground. -------------------------------------------------------------------------- */ .u-shape { fill: #EEF6E7; stroke: #C6E2B2; } .u:hover .u-shape { fill: var(--sage); stroke: var(--leaf); } .u.sel .u-shape { fill: var(--moss); stroke: var(--leaf-deep); } .u.dim .u-shape { fill: #F4F2EE; stroke: #E4DED6; } .u-anchor .u-shape { fill: #DCEFD0; stroke: var(--moss); } .u-kiosk .u-shape { fill: #F5F9DC; stroke: var(--lime); } .u-code { fill: var(--leaf-deep); } .u-sqm { fill: var(--muted); } .plan-static { fill: #F3EDE7; stroke: #E0D3C8; } /* warm neutral tint */ .plan-green { fill: #E4F1D6; stroke: #C6E2B2; } /* sage tint */ .plan-water { fill: #DFF3E9; stroke: #B4E0CB; } /* green-mid tint */ .plan-label { fill: #9A9187; } .plan-road { stroke: #E8E0D8; } /* -------------------------------------------------------------------------- 2.2 Brand naming English is always PADDIO, all caps. -------------------------------------------------------------------------- */ .nav-logo, footer.site .brand { text-transform: uppercase; letter-spacing: .04em; font-weight: 700; } .nav-logo .sub { display: block; font-size: 9px; letter-spacing: .34em; font-weight: 500; opacity: .8; margin-top: -2px; } /* -------------------------------------------------------------------------- Chapter 5 — Clover graphic system Stepped interlocking blocks derived from the logo's paddy-field form. Drawn as a mask so a single shape can take any brand colour. -------------------------------------------------------------------------- */ :root { --clover-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M0 60h30V30h30V0h30v30H60v30H30v30H0z' fill='%23000'/%3E%3Cpath d='M60 90h30V60h30v30H90v30H60z' fill='%23000'/%3E%3C/svg%3E"); } .clover { --clover-size: 120px; background-color: var(--moss); -webkit-mask-image: var(--clover-tile); mask-image: var(--clover-tile); -webkit-mask-size: var(--clover-size) var(--clover-size); mask-size: var(--clover-size) var(--clover-size); -webkit-mask-repeat: repeat; mask-repeat: repeat; pointer-events: none; } /* Decorative corner block — sits behind content, never over type */ .clover-corner { position: absolute; z-index: 0; width: clamp(180px, 26vw, 420px); aspect-ratio: 1; opacity: .16; } .clover-corner.tr { top: 0; right: 0; } .clover-corner.br { bottom: 0; right: 0; } .clover-corner.bl { bottom: 0; left: 0; } @media (prefers-reduced-motion: reduce) { .clover { animation: none; } } /* -------------------------------------------------------------------------- Chapter 5 — Brand motif What the guideline specifies, pp.29-35: 5.1 Leaf Inspired Shape — a rectangle with two OPPOSITE corners rounded to a true quarter-circle. Not an ellipse, and not a percentage radius: a percentage radius on a wide box gives a lens, which is what the old `.leaf` was doing wrong. 5.1 Forms in Row — those leaves chained into a step that grows from a dot into a slab. This is the "where life flows" idea made graphic. 5.3 Applied either as Graphic Elements (the step crossing a green field) or Full Frame (leaf-masked photos scattered on green). -------------------------------------------------------------------------- */ :root { /* Three motif forms, not one. 5.1 shows the leaves connecting in more than a single-file line: a woven cluster, a branch gathering into a slab, and the row. The structural rule behind all three is that orientation alternates on grid parity — a leaf rounded top-left/bottom-right sits next to one rounded top-right/bottom- left, so neighbours interlock instead of merely touching. Generated on a 64px cell grid; radius is half the short side, which keeps every corner a true quarter-circle at any span. Masks, not images, so one shape takes any brand colour. */ --motif-cluster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M64 0H160A32 32 0 0 1 192 32V64H96A32 32 0 0 1 64 32Z M192 0H224A32 32 0 0 1 256 32V64H224A32 32 0 0 1 192 32Z M0 64H32A32 32 0 0 1 64 96V128H32A32 32 0 0 1 0 96Z M96 64H128V160A32 32 0 0 1 96 192H64V96A32 32 0 0 1 96 64Z M128 64H224A32 32 0 0 1 256 96V128H160A32 32 0 0 1 128 96Z M192 128H224A32 32 0 0 1 256 160V192H224A32 32 0 0 1 192 160Z M32 128H64V160A32 32 0 0 1 32 192H0V160A32 32 0 0 1 32 128Z M96 192H256V224A32 32 0 0 1 224 256H64V224A32 32 0 0 1 96 192Z M160 256H192V288A32 32 0 0 1 160 320H128V288A32 32 0 0 1 160 256Z' fill='%23000'/%3E%3C/svg%3E"); --motif-branch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 256'%3E%3Cpath d='M0 64H32A32 32 0 0 1 64 96V128H32A32 32 0 0 1 0 96Z M96 64H128V96A32 32 0 0 1 96 128H64V96A32 32 0 0 1 96 64Z M64 128H96A32 32 0 0 1 128 160V192H96A32 32 0 0 1 64 160Z M160 0H256V32A32 32 0 0 1 224 64H128V32A32 32 0 0 1 160 0Z M128 64H288A32 32 0 0 1 320 96V128H160A32 32 0 0 1 128 96Z M320 128H384V192A64 64 0 0 1 320 256H256V192A64 64 0 0 1 320 128Z' fill='%23000'/%3E%3C/svg%3E"); --motif-row: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 256'%3E%3Cpath d='M0 192H32A32 32 0 0 1 64 224V256H32A32 32 0 0 1 0 224Z M96 192H128V224A32 32 0 0 1 96 256H64V224A32 32 0 0 1 96 192Z M160 128H256V160A32 32 0 0 1 224 192H128V160A32 32 0 0 1 160 128Z M256 64H352A32 32 0 0 1 384 96V128H288A32 32 0 0 1 256 96Z M448 0H576V64A64 64 0 0 1 512 128H384V64A64 64 0 0 1 448 0Z' fill='%23000'/%3E%3C/svg%3E"); --leaf-r: clamp(44px, 8vw, 120px); } .motif { background-color: var(--moss); -webkit-mask-image: var(--motif-row); mask-image: var(--motif-row); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; pointer-events: none; } /* Enquire and other deep-green fields: two flows at different scales, the way 5.3.1 layers them, rather than a repeating wallpaper. */ .motif-field { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .motif-field .f { position: absolute; background-color: var(--moss); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .motif-field .f1 { left: -4%; bottom: -12%; width: 46%; aspect-ratio: 9/4; opacity: .13; -webkit-mask-image: var(--motif-row); mask-image: var(--motif-row); } .motif-field .f2 { right: 4%; top: -14%; width: 20%; aspect-ratio: 1; opacity: .11; background-color: var(--lime); -webkit-mask-image: var(--motif-cluster); mask-image: var(--motif-cluster); } .motif-field .f3 { right: -6%; bottom: 6%; width: 26%; aspect-ratio: 3/2; opacity: .09; transform: scaleX(-1); -webkit-mask-image: var(--motif-branch); mask-image: var(--motif-branch); } @media (max-width: 760px) { .motif-field .f2, .motif-field .f3 { display: none; } .motif-field .f1 { width: 78%; } } /* Decorative corner flow — behind content, never over type */ .motif-corner { position: absolute; z-index: 0; width: clamp(240px, 34vw, 560px); aspect-ratio: 530/260; opacity: .14; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .motif-corner.tr { top: 6%; right: -6%; -webkit-mask-image: var(--motif-branch); mask-image: var(--motif-branch); aspect-ratio: 3/2; } .motif-corner.br { bottom: 4%; right: -6%; -webkit-mask-image: var(--motif-cluster); mask-image: var(--motif-cluster); aspect-ratio: 1; width: clamp(180px, 24vw, 380px); } .motif-corner.bl { bottom: 4%; left: -6%; transform: scaleX(-1); -webkit-mask-image: var(--motif-row); mask-image: var(--motif-row); aspect-ratio: 9/4; } /* Small solid leaf used as a card accent — a single leaf, not the full flow */ .motif.cl { -webkit-mask-image: none; mask-image: none; border-radius: var(--leaf-r) 0 var(--leaf-r) 0; --leaf-r: 34px; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ footer.site { background: var(--leaf-deep); color: rgba(255, 255, 255, .68); position: relative; overflow: hidden; } footer.site .foot-grid { position: relative; z-index: 1; border-bottom-color: rgba(255, 255, 255, .14); } footer.site .foot-bottom { position: relative; z-index: 1; } footer.site a:hover { color: var(--lime); } .foot-block { display: grid; gap: 8px; font-size: 13.5px; line-height: 1.6; } .foot-block .lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sage); margin-bottom: 2px; } html[lang="th"] .foot-block .lbl { letter-spacing: .04em; text-transform: none; } .foot-hours { display: grid; gap: 4px; } .foot-hours .row { display: flex; justify-content: space-between; gap: 16px; max-width: 260px; } .foot-hours .row b { color: #fff; font-variant-numeric: tabular-nums; font-weight: 600; } .socials { display: flex; gap: 10px; margin-top: 6px; } .socials a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); display: grid; place-items: center; transition: background .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease); } .socials a:hover { background: var(--lime); border-color: var(--lime); transform: translateY(-2px); } .socials a:hover svg { fill: var(--leaf-deep); } .socials svg { width: 17px; height: 17px; fill: #fff; transition: fill .25s var(--ease); } .line-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); font-weight: 600; color: #fff; font-size: 14px; transition: background .25s var(--ease), border-color .25s var(--ease); } .line-badge:hover { background: var(--lime); border-color: var(--lime); color: var(--leaf-deep); } /* ========================================================================== LOGO — extracted as vector from the brand guideline (page 9 page-mark), so these are the artwork's own paths and colours, not a redraw. assets/brand/: logo-full, logo-full-light, logo-horizontal, logo-horizontal-light, logo-mark ========================================================================== */ .nav-logo { display: inline-flex; align-items: center; text-indent: 0; } /* Desktop lockup runs ~66px tall (about 2x the first pass) and compacts to 52px once the nav is scrolled, so the brand leads without the bar swallowing the viewport. */ .nav-logo img { height: 66px; width: auto; display: block; transition: height .35s var(--ease), opacity .3s var(--ease); } .nav.scrolled .nav-logo img, .nav.solid .nav-logo img { height: 52px; } .nav-logo .on-dark { display: block; } .nav-logo .on-light { display: none; } .nav.scrolled .nav-logo .on-dark, .nav.solid .nav-logo .on-dark { display: none; } .nav.scrolled .nav-logo .on-light, .nav.solid .nav-logo .on-light { display: block; } @media (max-width: 900px) { .nav-logo img, .nav.scrolled .nav-logo img, .nav.solid .nav-logo img { height: 38px; } body.menu-open .nav-logo .on-dark { display: none; } body.menu-open .nav-logo .on-light { display: block; } } footer.site .brand { display: block; } footer.site .brand img { height: 118px; width: auto; } /* Taller lockup needs a touch more breathing room in the bar */ .nav { padding-top: 14px; padding-bottom: 14px; } .nav.scrolled, .nav.solid { padding-top: 10px; padding-bottom: 10px; } @media (max-width: 900px) { .nav, .nav.scrolled, .nav.solid { padding-top: 10px; padding-bottom: 10px; } } /* ========================================================================== PADDIO BANGNA naming ========================================================================== */ .pb { color: var(--moss); font-weight: 600; letter-spacing: .01em; } .enq .pb, .stats .pb, footer.site .pb, .strip .pb { color: var(--lime); } .stat-label .sub { display: block; margin-top: 4px; font-size: 11px; font-weight: 400; letter-spacing: .02em; text-transform: none; opacity: .72; } /* Distances to named neighbours */ .near { margin-top: 26px; border-top: 1px solid var(--line); } .near-h { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--leaf); margin: 18px 0 10px; } html[lang="th"] .near-h { letter-spacing: .04em; text-transform: none; } .near-row { display: flex; justify-content: space-between; gap: 18px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid rgba(21,71,52,.07); font-size: 14.5px; } .near-row:last-child { border-bottom: none; } .near-row span { color: var(--muted); } .near-row b { color: var(--leaf-deep); font-variant-numeric: tabular-nums; white-space: nowrap; } /* LINE QR slot — official branded code to be dropped in from LINE's console */ .qr-slot { width: 132px; height: 132px; border-radius: 14px; border: 2px dashed rgba(214,232,101,.55); display: grid; place-items: center; text-align: center; font-size: 12px; line-height: 1.4; color: var(--lime); background: rgba(255,255,255,.05); } /* ========================================================================== LEAF SHAPES — "use this leaf format as a background", and put the email field inside the larger leaf. A leaf is one rounded corner opposite another, which is a pure border-radius trick, no image needed. ========================================================================== */ /* Shape utilities from guideline 5.1. Nothing uses them at the moment — .leaf-photo and .leaf-form below apply the radius directly — but they are the vocabulary for any new leaf-shaped element, so they stay. */ .leaf { border-radius: var(--leaf-r) 0 var(--leaf-r) 0; } /* "Use this leaf format as a background. Switch the leaf photo to the smaller one and the email address fill out part to be in the bigger leaf." Guideline p22 is the reference: deep green field, one large leaf, one small leaf, overlapping on the diagonal. */ .wait { background: var(--leaf-deep); position: relative; overflow: hidden; } .wait .container { position: relative; z-index: 1; } .wait-grid { display: grid; grid-template-columns: 5fr 7fr; align-items: center; gap: 0; } /* the smaller leaf — photo */ .leaf-photo { position: relative; z-index: 2; border-radius: 0 var(--leaf-r) 0 var(--leaf-r); overflow: hidden; aspect-ratio: 4 / 5; margin-right: -8%; box-shadow: 0 30px 70px rgba(0,0,0,.28); } .leaf-photo img { width: 100%; height: 100%; object-fit: cover; } /* the bigger leaf — the form */ .leaf-form { position: relative; z-index: 1; background: var(--leaf); border-radius: var(--leaf-r) 0 var(--leaf-r) 0; padding: clamp(46px, 6vw, 86px) clamp(34px, 5vw, 74px) clamp(46px, 6vw, 86px) clamp(56px, 8vw, 120px); color: #fff; } .leaf-form h2, .leaf-form .eyebrow { color: #fff; } .leaf-form .eyebrow { color: var(--lime); } .leaf-form .body-lg { color: rgba(255,255,255,.86) !important; opacity: 1 !important; } .leaf-form .field label { color: rgba(255,255,255,.8); } .leaf-form .form-note { color: rgba(255,255,255,.66) !important; opacity: 1 !important; } .leaf-form input { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; } .leaf-form input::placeholder { color: rgba(255,255,255,.5); } .leaf-form input:focus { border-color: var(--lime); background: rgba(255,255,255,.18); } .leaf-form .btn-primary { background: var(--leaf-deep); } .leaf-form .btn-primary:hover { background: #0d3325; } @media (max-width: 860px) { .wait-grid { grid-template-columns: 1fr; } .leaf-photo { aspect-ratio: 16 / 10; margin: 0 0 -10% 0; max-width: 78%; } .leaf-form { padding: clamp(56px, 12vw, 90px) 30px 44px; } } /* Enquire now uses the motif field, not the rejected checkerboard. */ /* Three-product cards on the leasing site */ .prod { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px 30px; position: relative; overflow: hidden; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .prod:hover { transform: translateY(-5px); box-shadow: 0 24px 48px rgba(21,71,52,.12); } .prod .cl { position: absolute; right: -20px; top: -20px; width: 108px; height: 108px; --clover-size: 54px; opacity: .14; } .prod .p-tag { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--leaf); margin-bottom: 16px; } html[lang="th"] .prod .p-tag { letter-spacing: .04em; text-transform: none; } .prod h3 { font-size: 24px; line-height: 1.15; margin-bottom: 14px; } .prod .p-num { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--leaf-deep); margin-bottom: 14px; } .prod .p-num span { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; } .prod p { font-size: 14.5px; color: var(--muted); margin-bottom: 22px; } .prod .btn { margin-top: auto; align-self: flex-start; } /* Retail-ecosystem list on the leasing site */ .eco-list { list-style: none; display: grid; gap: 16px; } .eco-list li { padding-left: 26px; position: relative; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.86); } .eco-list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 10px; height: 10px; border-radius: 3px; background: var(--lime); } .eco-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); padding: 30px 28px; } .eco-card .k { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); margin-bottom: 8px; } html[lang="th"] .eco-card .k { letter-spacing: .04em; text-transform: none; } .eco-card .v { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: #fff; margin-bottom: 14px; } .eco-card p { font-size: 14.5px; color: rgba(255,255,255,.72); } /* ========================================================================== NAV CTA ON SMALL SCREENS The leasing site's Enquire pill is its main conversion path, so it keeps the green pill everywhere. The consumer site's is not — the primary action there is "Get opening updates", and Enquire is a section further down the same page, also linked from the footer. A green pill pinned to the top bar on a phone is just visual noise, so opt that nav out with a modifier. ========================================================================== */ @media (max-width: 900px) { .nav--plain-cta .nav-links > a.nav-cta { background: none; color: var(--leaf-deep) !important; padding: 0; font-size: 26px; font-weight: 700; border-radius: 0; } .nav--plain-cta .nav-links > a.nav-cta:hover { background: none; transform: none; } }