/* MyRoomeo shared design system Extracted from index.html so other static pages can reuse the same tokens and components. See .claude/skills/myroomeo-design-system/SKILL.md for the component catalog and page-scaffolding instructions. Requires: Google Fonts (PT Serif, DM Sans, Space Grotesk) linked in , and the inline icon sprite copied into (see skill doc). */ /* ---------- Tokens ---------- */ :root{--paper:#fdf6ee;--ink:#1a1209;--body:#4a3b33;--orange:#e86c2c;--muted:#9c8878;--border:#e8ddd0;--page:1360px;--purple:#6f4fa8;--blue:#4a72b3;--pink:#c94f80;--green:#4a8c6f; --font-serif:"PT Serif",Georgia,serif;--font-sans:"DM Sans",Arial,sans-serif;--font-label:'Space Grotesk',Arial,sans-serif; --fs-2xs:11px;--fs-xs:12px;--fs-sm:13px;--fs-base:14px;--fs-lg:16px;--fs-2xl:20px;--fs-4xl:32px;--fs-6xl:44px; --lh-tight:1;--lh-snug:1.2;--lh-normal:1.3;--lh-relaxed:1.4;--lh-loose:1.5} /* ---------- Reset / base ---------- */ *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans)}a{color:inherit}img{display:block;max-width:100%}figure{margin:0} /* ---------- Page shell ---------- */ .page{width:min(100%,var(--page));margin:0 auto;overflow:visible}.header{height:72px;width:1184px;max-width:calc(100% - 88px);margin:0 auto;display:flex;align-items:center}.header a{display:inline-block;transition:transform .25s ease,opacity .25s ease}.header a:hover{transform:translateY(-1px);opacity:.86}.header img{width:178px;height:auto;object-fit:contain;object-position:left center} .section{width:100%;max-width:1280px;margin:10px auto 0;padding:23px 44px 0} /* ---------- Icon sprite helper ---------- */ .icon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-.15em;flex:none} /* ---------- Hero band (tan banner with scalloped edge) ---------- */ .hero-band{width:100vw;max-width:none;margin-left:calc(50% - 50vw);background:#f1e3c7;position:relative;padding-bottom:30px}.hero-band-inner{margin-top:0;padding-top:23px}.hero-band:after{content:"";position:absolute;left:0;right:0;bottom:-15px;height:30px;background-image:radial-gradient(circle at 15px 15px,#f1e3c7 15px,transparent 15.5px);background-size:30px 30px;background-repeat:repeat-x;pointer-events:none} /* ---------- Brand hero (logo + tagline) ---------- */ .brand-hero{width:100%;max-width:900px;margin:6px auto 0;text-align:center}.brand-hero-logo{width:150px;height:auto;margin:0 auto}.brand-hero-tag{margin:14px 0 0;font:400 var(--fs-6xl)/var(--lh-snug) var(--font-serif);color:var(--ink);letter-spacing:-.3px} /* ---------- Harmony/Chaos duel comparison ---------- */ .double-wrap{height:596px;width:100%;position:relative;z-index:2}.duel-frame{position:absolute;inset:18px 0 auto;height:516px;filter:drop-shadow(0 18px 22px rgba(63,43,31,.16))}.duel-panel{position:absolute;top:0;bottom:0;width:calc(50% + 35px);overflow:hidden;background:#d5c1aa}.duel-panel img{width:100%;height:100%;object-fit:cover}.duel-harmony{left:0;clip-path:polygon(0 2%,calc(100% - 6px) 0,calc(100% - 76px) 100%,0 100%);border-radius:18px 0 0 18px}.duel-chaos{right:0;clip-path:polygon(76px 0,100% 2%,100% 100%,6px 100%);border-radius:0 18px 18px 0}.duel-label{position:absolute;z-index:3;width:252px;min-height:108px;padding:21px 24px;border-radius:17px;background:rgba(255,252,247,.91);box-shadow:0 10px 22px rgba(47,32,24,.16);backdrop-filter:blur(10px)}.duel-label h3{display:flex;align-items:center;gap:10px;margin:0 0 11px;font:700 var(--fs-2xl)/var(--lh-snug) var(--font-serif)}.duel-label h3 img{width:21px;height:21px}.duel-label p{margin:0;font:400 var(--fs-sm)/var(--lh-relaxed) var(--font-sans)}.duel-label-left{left:-8px;bottom:-10px;color:#566448}.duel-label-right{right:-8px;top:-10px;color:#563074}.duel-vs{position:absolute;z-index:4;left:50%;top:54%;width:124px;height:124px;transform:translate(-50%,-50%)}.duel-vs img{width:100%;height:100%}.duel-vs span{position:absolute;inset:0;display:grid;place-items:center;color:#473c35;font:600 var(--fs-4xl)/var(--lh-tight) var(--font-serif)} /* ---------- CTA bar (reusable, appears multiple times per page) ---------- */ .cta-bar{display:flex;align-items:center;gap:20px;width:100%;max-width:1192px;margin:40px auto 0;padding:22px 28px;border-radius:22px;background:#fffdf9;box-shadow:0 14px 32px rgba(63,43,31,.1);border:1px solid rgba(232,108,44,.08)}.cta-bar-icon{flex:none;width:52px;height:52px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;overflow:hidden}.cta-bar-icon img{width:34px;height:34px;object-fit:contain}.cta-bar-copy{flex:1;min-width:0}.cta-bar-copy h3{margin:0;font:700 var(--fs-lg)/var(--lh-normal) var(--font-sans);color:var(--ink)}.cta-bar-copy p{margin:3px 0 0;font:400 var(--fs-base)/var(--lh-relaxed) var(--font-sans);color:#8a7a6d}.cta-bar-btn{flex:none;display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 26px;border-radius:25px;background:var(--orange);color:#fff;text-decoration:none;font:600 var(--fs-base)/var(--lh-tight) var(--font-sans);white-space:nowrap;transition:transform .2s ease,background-color .2s ease}.cta-bar-btn:hover{background:#cf5a1f;transform:translateY(-2px)} /* ---------- Framework section (eyebrow, headings, lede, pills) ---------- */ .framework{width:100%;max-width:1280px;margin:0 auto;padding:88px 0 0;text-align:center}.framework-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0;color:var(--orange);font:700 var(--fs-xs)/var(--lh-tight) var(--font-label);letter-spacing:.14em;text-transform:uppercase}.framework h3{margin:22px 0 0;font:400 var(--fs-6xl)/var(--lh-snug) var(--font-serif);color:var(--ink);letter-spacing:-.8px}.framework h2{margin:6px 0 0;font:400 var(--fs-6xl)/var(--lh-snug) var(--font-serif);color:var(--ink);letter-spacing:-1.2px}.framework-lede{max-width:560px;margin:16px auto 0;color:#8a7a6d;font:400 var(--fs-lg)/var(--lh-loose) var(--font-sans)} .framework-pills{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:34px 0 0}.pill{display:flex;align-items:center;gap:12px;padding:14px 22px;border-radius:30px;background:#fffdf9;border:1px solid rgba(232,108,44,.1);box-shadow:0 8px 18px rgba(63,43,31,.06);text-align:left}.pill .icon{width:20px;height:20px;color:var(--orange)}.pill strong{display:block;font:600 var(--fs-base)/var(--lh-normal) var(--font-sans);color:var(--ink)}.pill span{display:block;margin-top:2px;font:400 var(--fs-xs)/var(--lh-normal) var(--font-sans);color:#96887b} .framework-meta{display:flex;justify-content:center;align-items:center;gap:10px;margin:36px 0 0;color:#96887b;font:400 var(--fs-sm)/var(--lh-tight) var(--font-sans)}.framework-meta span{display:inline-flex;align-items:center;gap:6px}.framework-meta .dot{opacity:.5} /* ---------- Type-card grid (roomie personality cards) ---------- */ .type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:44px 0 0;text-align:left}.type-card{border-radius:20px;background:#fffdf9;border:1px solid rgba(63,43,31,.08);box-shadow:0 10px 24px rgba(63,43,31,.06);overflow:hidden;display:flex;flex-direction:column}.type-card-head{display:flex;align-items:stretch;justify-content:space-between;gap:10px;padding:22px 0 22px 24px}.type-card-copy{flex:1;min-width:0;padding-top:2px}.type-card-copy h4{margin:0;font:700 var(--fs-lg)/var(--lh-tight) var(--font-sans);color:var(--ink);text-transform:uppercase;letter-spacing:.01em}.type-card-sub{margin:6px 0 0;font:700 var(--fs-sm)/var(--lh-tight) var(--font-sans)}.type-card-desc{margin:10px 0 0;max-width:170px;color:#96887b;font:400 var(--fs-sm)/var(--lh-relaxed) var(--font-sans)}.type-card-img-wrap{flex:none;width:118px;height:140px;position:relative;overflow:hidden;border-radius:0 20px 20px 0}.type-card-img-wrap img{position:absolute;left:50%;bottom:0;width:187px;max-width:none;transform:translateX(-50%)}.type-card-row{padding:14px 24px;border-top:1px solid rgba(63,43,31,.07)}.type-card-row-split{display:flex;gap:16px}.type-card-col{flex:1;min-width:0;padding-right:16px;border-right:1px solid rgba(63,43,31,.07)}.type-card-col:last-child{padding-right:0;border-right:0}.type-card-col .type-card-avatars{gap:10px;flex-wrap:wrap}.type-card-col .avatar-img{width:30px;height:30px}.type-card-label{display:flex;align-items:center;gap:6px;margin:0;font:700 var(--fs-xs)/var(--lh-tight) var(--font-sans);text-transform:none}.type-card-label.good{color:var(--green)}.type-card-label.warn{color:var(--orange)}.type-card-label .icon{width:14px;height:14px}.type-card-avatars{display:flex;gap:20px;margin-top:10px}.avatar{display:flex;flex-direction:column;align-items:center;gap:6px}.avatar-img{width:34px;height:34px;border-radius:50%;background:#f1e4d4;display:flex;align-items:center;justify-content:center;overflow:hidden}.avatar-img img{width:100%;height:100%;object-fit:cover;object-position:top center;transform:scale(1.5)}.avatar span{font:400 var(--fs-2xs)/var(--lh-tight) var(--font-sans);color:#96887b}.type-card-none{margin:10px 0 0;color:#96887b;font:400 var(--fs-sm)/var(--lh-relaxed) var(--font-sans)} /* ---------- Footer / "match" section (full-bleed photo + email capture) ---------- */ .match{height:1180px;width:100vw;max-width:none;margin-left:calc(50% - 50vw);position:relative;overflow:hidden;background:var(--paper)}.match-lawn{position:absolute;left:0;right:0;top:875px;bottom:0;background:url('../figma-home/footer-lawn-clean.png') center bottom/cover no-repeat}.footer-house,.footer-people{position:absolute;left:0;top:220px;width:100%;height:760px;object-fit:cover;z-index:1;pointer-events:none}.footer-people{transform:scale(1.08);transform-origin:center center;object-position:center 42%}.match:after{content:"";position:absolute;left:0;right:0;bottom:0;height:350px;background:linear-gradient(transparent,rgba(45,27,20,.68));pointer-events:none;z-index:2}.match-content{position:absolute;top:64px;left:0;right:0;text-align:center;z-index:3}.match-content h2{margin:0;font:400 var(--fs-6xl)/var(--lh-snug) var(--font-serif);letter-spacing:-.38px}.match-content p{margin:18px auto 0;max-width:720px;color:#6b5a50;font:400 var(--fs-lg)/var(--lh-loose) var(--font-sans)}.email{position:relative;height:58px;width:410px;margin:26px auto 0;border:1px solid rgba(252,111,49,.14);border-radius:30px;background:rgba(46,26,19,.56);box-shadow:0 10px 26px rgba(45,27,20,.14);display:flex;align-items:center;padding-left:22px;overflow:hidden;transition:border-color .22s ease,background-color .22s ease,box-shadow .22s ease}.email:hover{background:rgba(46,26,19,.63)}.email:focus-within{border-color:rgba(255,255,255,.5);background:rgba(46,26,19,.68);box-shadow:0 0 0 4px rgba(232,108,44,.13),0 12px 30px rgba(45,27,20,.18)}.email input{flex:1;min-width:0;border:0;background:transparent;outline:0;color:#fff;font:400 var(--fs-base) var(--font-sans)}.email input::placeholder{color:#fff;opacity:1}.email button{height:48px;width:140px;margin-right:5px;border:0;border-radius:25px;background:var(--orange);color:#fff;font:600 var(--fs-base) var(--font-sans);cursor:pointer;transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}.email button:hover{background:#cf5a1f;transform:translateY(-1px);box-shadow:0 6px 14px rgba(45,27,20,.2)}.email button:active{transform:translateY(0);box-shadow:none}.email button:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(255,255,255,.34)}.footer-row{position:absolute;left:max(72px,calc((100vw - 1280px)/2 + 72px));right:max(72px,calc((100vw - 1280px)/2 + 72px));top:948px;height:112px;z-index:4;display:flex;align-items:flex-end;justify-content:space-between}.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:8px;color:#fff}.footer-logo{width:130px;height:auto;filter:brightness(0) invert(1)}.footer-copy{color:#f8f1e6;font:500 var(--fs-2xs)/var(--lh-loose) var(--font-label);letter-spacing:.08em;text-transform:uppercase;opacity:.85}.social{display:flex;gap:24px;align-items:center;height:30px;margin-bottom:12px}.social img{width:30px;height:30px;filter:brightness(0) invert(1);opacity:.92;transition:transform .2s ease,opacity .2s ease}.social img:hover{transform:translateY(-2px);opacity:1} /* ---------- Responsive ---------- */ @media(max-width:900px){.header{max-width:calc(100% - 36px)}.section{padding-left:18px;padding-right:18px}.double-wrap{height:auto;aspect-ratio:1192/554}.duel-frame{inset:10px 0;height:calc(100% - 20px)}.duel-label{display:none}.duel-vs{width:76px;height:76px}.duel-vs span{font-size:22px}.match{height:900px}.match-content{top:48px;padding:0 22px}.match-content h2{font-size:32px;line-height:1.2}.match-content p{font-size:14px;line-height:21px}.email{width:min(410px,100%);margin-top:22px}.footer-house,.footer-people{top:245px;height:520px}.match-lawn{top:690px}.footer-row{left:24px;right:24px;top:738px}.copyright{left:24px;top:834px}.social{gap:10px}.brand-hero-logo{width:120px}.brand-hero-tag{font-size:32px;line-height:1.2}.cta-bar{flex-wrap:wrap;padding:20px;border-radius:18px}.cta-bar-btn{width:100%;justify-content:center}.framework{padding-top:56px}.framework h3{font-size:32px}.framework h2{font-size:32px}.framework-pills{flex-direction:column;align-items:stretch}.type-grid{grid-template-columns:1fr}.type-card-img-wrap{width:96px}} @media(prefers-reduced-motion:reduce){.header a,.email,.email button,.social img,.cta-bar-btn{transition:none}.header a:hover,.email button:hover,.social img:hover,.cta-bar-btn:hover{transform:none}} /* ---------- Header account menu (sign up / log in) ---------- */ .header-account{margin-left:auto;display:flex;align-items:center;gap:14px} .account-actions{display:flex;align-items:center;gap:14px} .account-link{border:none;background:none;padding:8px 2px;font:600 var(--fs-sm)/var(--lh-tight) var(--font-sans);color:var(--body);cursor:pointer} .account-link:hover{color:var(--ink)} .account-btn-primary{display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:20px;border:none;background:var(--orange);color:#fff;font:600 var(--fs-sm)/var(--lh-tight) var(--font-sans);cursor:pointer;transition:background-color .2s ease,transform .2s ease} .account-btn-primary:hover{background:#cf5a1f;transform:translateY(-1px)} .account-signedin{position:relative;display:flex;align-items:center} .account-chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:20px;border:1px solid var(--border);background:#fffdf9;font:600 var(--fs-sm)/var(--lh-tight) var(--font-sans);color:var(--ink);cursor:pointer;max-width:220px} .account-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .account-chip .icon{width:12px;height:12px;flex:none;color:var(--muted)} .account-dropdown{position:absolute;right:0;top:calc(100% + 8px);min-width:160px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 14px 32px rgba(63,43,31,.14);padding:6px;z-index:60} .account-dropdown a,.account-dropdown button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:10px;border:none;background:none;font:600 var(--fs-sm)/var(--lh-tight) var(--font-sans);color:var(--body);cursor:pointer;text-decoration:none} .account-dropdown a:hover,.account-dropdown button:hover{background:var(--paper);color:var(--ink)} .account-actions[hidden],.account-signedin[hidden]{display:none} /* ---------- Account modal (log in / sign up) ---------- */ .account-modal{margin:auto;border:none;border-radius:20px;padding:0;max-width:400px;width:calc(100% - 40px);box-shadow:0 20px 60px rgba(63,43,31,.25)} .account-modal::backdrop{background:rgba(26,18,9,.45)} .account-modal-inner{padding:28px 26px 26px;position:relative} .account-modal-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:none;background:var(--paper);color:var(--body);font-size:20px;line-height:1;cursor:pointer} .account-modal-close:hover{color:var(--ink)} .account-modal h2{margin:0 0 20px;font:400 var(--fs-2xl)/var(--lh-snug) var(--font-serif);color:var(--ink)} .account-modal-tabs{display:flex;gap:6px;background:var(--paper);border-radius:999px;padding:4px;margin-bottom:20px} .account-modal-tabs[hidden]{display:none} .account-tab{flex:1;border:none;background:none;padding:8px 0;border-radius:999px;font:600 var(--fs-sm)/var(--lh-tight) var(--font-sans);color:var(--muted);cursor:pointer} .account-tab[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 2px 6px rgba(63,43,31,.12)} .account-form{display:flex;flex-direction:column;gap:14px} .account-form[hidden]{display:none} .account-form label{display:flex;flex-direction:column;gap:6px;font:600 var(--fs-sm)/var(--lh-tight) var(--font-sans);color:var(--body)} .account-form input{font:400 var(--fs-base)/var(--lh-normal) var(--font-sans);padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--ink)} .account-form input:focus{outline:2px solid var(--orange);outline-offset:1px} .password-field{position:relative;display:flex} .password-field input{flex:1;min-width:0;padding-right:42px} .password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;background:none;color:var(--muted);cursor:pointer;border-radius:6px} .password-toggle:hover{color:var(--ink);background:var(--paper)} .account-form-error{color:#a63722;font:600 var(--fs-sm)/var(--lh-normal) var(--font-sans);margin:0} .account-form-success{color:#2f7d51;font:600 var(--fs-sm)/var(--lh-normal) var(--font-sans);margin:0} .account-form-hint{margin:0;font:400 var(--fs-sm)/var(--lh-relaxed) var(--font-sans);color:var(--muted)} .account-form-link{align-self:flex-start;border:none;background:none;padding:0;font:600 var(--fs-sm)/var(--lh-tight) var(--font-sans);color:var(--orange);cursor:pointer;text-decoration:underline;text-underline-offset:2px} .account-form-link:hover{color:#cf5a1f} .account-submit-btn{height:46px;border-radius:23px;border:none;background:var(--orange);color:#fff;font:700 var(--fs-base)/var(--lh-tight) var(--font-sans);cursor:pointer;transition:background-color .2s ease} .account-submit-btn:hover{background:#cf5a1f} .account-submit-btn:disabled{opacity:.6;cursor:default} @media(max-width:520px){.account-actions .account-link{display:none}}