/* Theme Name: Anything Modern Theme URI: https://www.anything.com.sg Author: Wei Yun Author URI: https://www.anything.com.sg Description: A modern, client-facing WordPress theme for www.anything.com.sg with built-in user registration (email, mobile, password), admin-approved sign-ups, member-gated content, and a property listings showcase. Pairs with the "Anything Property Bot" plugin (the [property_transactions] shortcode is embedded on the homepage automatically when that plugin is active). Version: 1.0.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: anything-modern */ /* ========================================================= Design tokens ========================================================= */ :root { --am-primary: #1a3fa0; --am-primary-dark: #142f7a; --am-primary-light: #3b5fc4; --am-accent: #f97316; --am-accent-dark: #c2410c; --am-text: #14161f; --am-text-muted: #5a5f6b; --am-bg: #ffffff; --am-bg-soft: #f6f7f9; --am-border: #e4e6ea; --am-success-bg: #eafaf0; --am-success-text: #146c3a; --am-error-bg: #fdecea; --am-error-text: #9c2b26; --am-warn-bg: #fff4e0; --am-warn-text: #8a5a00; --am-radius: 14px; --am-max-width: 1180px; --am-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --am-font-display: 'Manrope', var(--am-font); --am-shadow-sm: 0 2px 8px rgba(20,30,60,.06); --am-shadow-md: 0 10px 30px rgba(20,30,60,.10); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--am-font); color: var(--am-text); background: var(--am-bg); line-height: 1.6; } h1, h2, h3, h4 { font-family: var(--am-font-display); font-weight: 800; letter-spacing: -.01em; } /* Scroll-reveal: only hidden once we know JS is running (html.js, set by an inline script in header.php before first paint) and theme.js adds .is-visible via IntersectionObserver as each element scrolls into view. With JS off, .no-js stays on and everything is simply visible. */ .js .am-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .js .am-reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .js .am-reveal { opacity: 1; transform: none; transition: none; } } img { max-width: 100%; height: auto; display: block; } a { color: var(--am-primary); text-decoration: none; } a:hover { text-decoration: underline; } .am-container { max-width: var(--am-max-width); margin: 0 auto; padding: 0 1.5rem; } h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .6rem; } .am-btn { display: inline-block; background: var(--am-primary); color: #fff; border: none; border-radius: 8px; padding: .75rem 1.5rem; font-weight: 700; cursor: pointer; font-size: 1rem; transition: background .15s ease, transform .15s ease, box-shadow .15s ease; } .am-btn:hover { background: var(--am-primary-dark); color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: var(--am-shadow-sm); } .am-btn.am-btn-accent { background: var(--am-accent); } .am-btn.am-btn-accent:hover { background: var(--am-accent-dark); } .am-btn.am-btn-outline { background: transparent; color: var(--am-primary); border: 1.5px solid var(--am-primary); } .am-btn.am-btn-outline:hover { background: var(--am-primary); color: #fff; } .am-btn.am-btn-danger { background: #b3261e; } .am-btn.am-btn-danger:hover { background: #8f1e18; } .am-btn.am-btn-small { padding: .35rem .8rem; font-size: .85rem; } /* ========================================================= Header / nav ========================================================= */ .am-site-header { border-bottom: 1px solid var(--am-border); position: sticky; top: 0; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); z-index: 50; } .am-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; max-width: var(--am-max-width); margin: 0 auto; } .am-logo { font-size: 1.3rem; font-weight: 800; color: var(--am-text); } .am-logo:hover { text-decoration: none; } .am-nav-toggle { display: none; background: none; border: none; font-size: 1.6rem; cursor: pointer; } .am-primary-nav ul { list-style: none; display: flex; gap: 1.5rem; margin: 0; padding: 0; align-items: center; } .am-primary-nav a { color: var(--am-text); font-weight: 500; } .am-primary-nav a:hover { color: var(--am-primary); text-decoration: none; } @media (max-width: 780px) { .am-nav-toggle { display: block; } .am-primary-nav { display: none; width: 100%; border-top: 1px solid var(--am-border); } .am-primary-nav.is-open { display: block; } .am-primary-nav ul { flex-direction: column; align-items: flex-start; gap: 0; padding: .5rem 1.5rem 1rem; } .am-primary-nav li { width: 100%; padding: .5rem 0; } .am-header-inner { flex-wrap: wrap; } } /* ========================================================= Hero ========================================================= */ .am-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--am-primary) 0%, var(--am-primary-dark) 65%, #0d1f5c 100%); color: #fff; padding: 6rem 1.5rem 5.5rem; text-align: center; } .am-hero::before, .am-hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(0px); opacity: .35; pointer-events: none; } .am-hero::before { width: 420px; height: 420px; background: radial-gradient(circle, var(--am-accent) 0%, transparent 70%); top: -160px; right: -120px; } .am-hero::after { width: 320px; height: 320px; background: radial-gradient(circle, var(--am-primary-light) 0%, transparent 70%); bottom: -140px; left: -100px; } .am-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; } .am-hero-eyebrow { display: inline-block; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .3rem .9rem; border-radius: 999px; margin-bottom: 1.2rem; } .am-hero h1 { font-size: 3rem; margin-bottom: .85rem; } .am-hero p { font-size: 1.2rem; opacity: .92; max-width: 640px; margin: 0 auto 2rem; } .am-hero .am-btn { background: #fff; color: var(--am-primary); margin: 0 .4rem; } .am-hero .am-btn:hover { background: #eef1fa; } .am-hero .am-btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); } .am-hero .am-btn-ghost:hover { background: rgba(255,255,255,.12); } .am-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; } /* ========================================================= Sections / cards ========================================================= */ .am-section { padding: 3.5rem 0; } .am-section-soft { background: var(--am-bg-soft); } .am-section-header { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; } .am-section-header p { color: var(--am-text-muted); } .am-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } .am-card { background: #fff; border: 1px solid var(--am-border); border-radius: var(--am-radius); overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; } .am-card:hover { box-shadow: 0 8px 24px rgba(20,30,60,.08); transform: translateY(-2px); } .am-card-img { aspect-ratio: 4/3; background: var(--am-bg-soft); overflow: hidden; } .am-card-img img { width: 100%; height: 100%; object-fit: cover; } .am-card-body { padding: 1.1rem 1.25rem 1.4rem; } .am-card-body h3 { font-size: 1.1rem; margin-bottom: .3rem; } .am-card-meta { color: var(--am-text-muted); font-size: .88rem; margin-bottom: .5rem; } .am-card-price { font-weight: 700; color: var(--am-primary); font-size: 1.05rem; } .am-empty-state { text-align: center; color: var(--am-text-muted); padding: 2rem 0; } /* ========================================================= Forms (register / login / contact) ========================================================= */ .am-form-wrap { max-width: 460px; margin: 0 auto; background: #fff; border: 1px solid var(--am-border); border-radius: var(--am-radius); padding: 2rem 2rem 2.25rem; } .am-form-wrap h1 { font-size: 1.6rem; text-align: center; } .am-form-wrap > p.am-form-sub { text-align: center; color: var(--am-text-muted); margin-top: 0; margin-bottom: 1.5rem; } .am-field { margin-bottom: 1.1rem; } .am-field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; } .am-field input, .am-field textarea { width: 100%; padding: .65rem .8rem; border: 1px solid var(--am-border); border-radius: 8px; font-size: 1rem; font-family: inherit; } .am-field input:focus, .am-field textarea:focus { outline: 2px solid var(--am-primary); outline-offset: 1px; } .am-field-hint { font-size: .8rem; color: var(--am-text-muted); margin-top: .3rem; } .am-form-wrap .am-btn { width: 100%; text-align: center; } .am-form-footer { text-align: center; margin-top: 1.25rem; font-size: .92rem; color: var(--am-text-muted); } .am-notice { border-radius: 8px; padding: .8rem 1rem; margin-bottom: 1.25rem; font-size: .92rem; } .am-notice-error { background: var(--am-error-bg); color: var(--am-error-text); border: 1px solid #f5c2c0; } .am-notice-success { background: var(--am-success-bg); color: var(--am-success-text); border: 1px solid #b7e6c8; } .am-notice-info { background: var(--am-bg-soft); color: var(--am-text-muted); border: 1px solid var(--am-border); } /* ========================================================= Members area ========================================================= */ .am-account-badge { display: inline-block; padding: .2rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; } .am-account-badge.pending { background: #fff4e0; color: #8a5a00; } .am-account-badge.approved { background: var(--am-success-bg); color: var(--am-success-text); } .am-account-badge.rejected { background: var(--am-error-bg); color: var(--am-error-text); } /* ========================================================= Footer ========================================================= */ .am-site-footer { background: #14161c; color: #c7cad3; padding: 3rem 0 2rem; margin-top: 3rem; } .am-site-footer a { color: #fff; } .am-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .am-footer-grid h4 { color: #fff; font-size: .95rem; } .am-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem; font-size: .85rem; text-align: center; color: #8b8f9c; } /* ========================================================= Stats bar (social proof) ========================================================= */ .am-stats-bar { background: var(--am-text); color: #fff; padding: 2.5rem 0; } .am-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; text-align: center; } .am-stat-number { font-family: var(--am-font-display); font-size: 2.4rem; font-weight: 800; color: #fff; line-height: 1; } .am-stat-label { color: #a9adba; font-size: .88rem; margin-top: .4rem; text-transform: uppercase; letter-spacing: .03em; } /* ========================================================= Services hub ========================================================= */ .am-service-card { position: relative; background: #fff; border: 1px solid var(--am-border); border-radius: var(--am-radius); padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: .6rem; transition: box-shadow .15s ease, transform .15s ease; } .am-service-card:hover { box-shadow: var(--am-shadow-md); transform: translateY(-3px); } .am-service-icon { width: 52px; height: 52px; border-radius: 12px; background: var(--am-bg-soft); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; } .am-service-card h3 { font-size: 1.15rem; margin: 0; } .am-service-card p { color: var(--am-text-muted); font-size: .92rem; margin: 0; flex-grow: 1; } .am-service-status { position: absolute; top: 1.25rem; right: 1.25rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .2rem .6rem; border-radius: 999px; } .am-service-status.live { background: var(--am-success-bg); color: var(--am-success-text); } .am-service-status.coming-soon { background: var(--am-warn-bg); color: var(--am-warn-text); } .am-service-card .am-btn { align-self: flex-start; margin-top: .4rem; } .am-service-source { font-size: .78rem; color: #9099a8; } /* ========================================================= Waitlist / notify-me ========================================================= */ .am-waitlist-box { background: var(--am-bg-soft); border: 1px dashed var(--am-border); border-radius: var(--am-radius); padding: 1.75rem; text-align: center; max-width: 480px; margin: 2rem auto 0; } .am-waitlist-box form { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; justify-content: center; } .am-waitlist-box input[type="email"] { flex: 1 1 220px; padding: .65rem .8rem; border: 1px solid var(--am-border); border-radius: 8px; font-size: 1rem; } /* ========================================================= Saved / favourite toggle ========================================================= */ .am-save-btn { position: absolute; top: .75rem; right: .75rem; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.92); border: 1px solid var(--am-border); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; z-index: 2; color: #b3261e; text-decoration: none; line-height: 1; } .am-save-btn:hover { background: #fff; text-decoration: none; } .am-save-btn.is-saved { background: #b3261e; color: #fff; border-color: #b3261e; } .am-card { position: relative; } /* ========================================================= Updates / news teaser ========================================================= */ .am-update-card { padding: 1.1rem 1.25rem; } .am-update-date { font-size: .78rem; color: var(--am-text-muted); text-transform: uppercase; letter-spacing: .03em; } /* ========================================================= Utility ========================================================= */ .am-text-center { text-align: center; } .am-mt-0 { margin-top: 0; } .screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); overflow: hidden; height: 1px; width: 1px; }