/* ============================================================ That's My Freaking Closet — Style Guide v1 ------------------------------------------------------------ Locked design system: palette + typography + scheme system. Phase 1 deliverable. Existing styles.css + editorial.css are unchanged — this file ADDS the new design tokens without restyling current components. Phase 2 will rebuild the login screen and nav using these tokens. Scheme map (background colors per page family): cream · default — Closet, Account, Profile, Browse blush · Wishlist sage · Outfits, Lookbook, Capsule, Trip, Style DNA soft-sea · Daily, Wear Log, Slideshow bright-teal · Top 10, Compare, Color Pairs, Rotation mediterranean · Girl Math, Insights terracotta · Receipts, Email/Cart/Paste Importers charcoal · Returned & Sold ============================================================ */ :root { /* ---- Palette --------------------------------------------- */ --tmf-cream: #F9F4ED; --tmf-blush: #EFE2D6; --tmf-warm-black: #1F1F1D; --tmf-warm-gray: #C9BCA9; --tmf-sage: #7E8B73; --tmf-deep-sage: #5C6554; --tmf-wood: #8E6F4D; --tmf-soft-sea: #6B8B96; --tmf-bright-teal: #3D8B9D; --tmf-mediterranean: #2F7585; --tmf-terracotta: #A66B4D; --tmf-charcoal: #2D2D2D; /* ---- Typography ------------------------------------------ */ --tmf-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --tmf-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --tmf-eyebrow-tracking: 0.32em; --tmf-eyebrow-size: 11px; /* ---- Active page scheme ---------------------------------- */ /* Default scheme is cream. A scheme-* class on or a */ /* wrapper overrides --tmf-scheme-bg / --tmf-scheme-fg. */ --tmf-scheme-bg: var(--tmf-cream); --tmf-scheme-fg: var(--tmf-warm-black); --tmf-scheme-muted: rgba(31, 31, 29, 0.65); } /* ============================================================ Scheme classes Apply one of these to or a section wrapper to switch the page's mood. The hero strip + utility classes below pick up the scheme automatically via custom properties. ============================================================ */ .scheme-cream { --tmf-scheme-bg: var(--tmf-cream); --tmf-scheme-fg: var(--tmf-warm-black); --tmf-scheme-muted: rgba(31, 31, 29, 0.65); } .scheme-blush { --tmf-scheme-bg: var(--tmf-blush); --tmf-scheme-fg: var(--tmf-warm-black); --tmf-scheme-muted: rgba(31, 31, 29, 0.65); } .scheme-sage { --tmf-scheme-bg: var(--tmf-deep-sage); --tmf-scheme-fg: var(--tmf-cream); --tmf-scheme-muted: rgba(249, 244, 237, 0.7); } .scheme-soft-sea { --tmf-scheme-bg: var(--tmf-soft-sea); --tmf-scheme-fg: var(--tmf-cream); --tmf-scheme-muted: rgba(249, 244, 237, 0.75); } .scheme-bright-teal { --tmf-scheme-bg: var(--tmf-bright-teal); --tmf-scheme-fg: var(--tmf-cream); --tmf-scheme-muted: rgba(249, 244, 237, 0.75); } .scheme-mediterranean { --tmf-scheme-bg: var(--tmf-mediterranean); --tmf-scheme-fg: var(--tmf-cream); --tmf-scheme-muted: rgba(249, 244, 237, 0.75); } .scheme-terracotta { --tmf-scheme-bg: var(--tmf-terracotta); --tmf-scheme-fg: var(--tmf-cream); --tmf-scheme-muted: rgba(249, 244, 237, 0.75); } .scheme-charcoal { --tmf-scheme-bg: var(--tmf-charcoal); --tmf-scheme-fg: var(--tmf-cream); --tmf-scheme-muted: rgba(249, 244, 237, 0.7); } /* ============================================================ Typography utilities Compose headlines without restyling individual elements. Color always inherits, so these work on any scheme. ============================================================ */ .tmf-eyebrow { font-family: var(--tmf-font-display); font-size: var(--tmf-eyebrow-size); font-weight: 500; letter-spacing: var(--tmf-eyebrow-tracking); text-transform: uppercase; color: inherit; margin: 0 0 0.5rem; } .tmf-headline { font-family: var(--tmf-font-display); font-style: italic; font-weight: 400; font-size: 36px; line-height: 1.15; color: inherit; margin: 0; } .tmf-headline--lg { font-size: 56px; } .tmf-headline--md { font-size: 36px; } .tmf-headline--sm { font-size: 24px; } .tmf-body { font-family: var(--tmf-font-body); font-size: 14px; line-height: 1.65; color: inherit; } .tmf-body em { font-family: var(--tmf-font-display); font-style: italic; font-size: 1.1em; } /* ============================================================ Scheme hero strip Drop at the top of any non-cream page to set the scheme mood. Inherits the active scheme via custom properties. ============================================================ */ .tmf-scheme-hero { background: var(--tmf-scheme-bg); color: var(--tmf-scheme-fg); padding: 4rem 2rem 3rem; } .tmf-scheme-hero__eyebrow { font-family: var(--tmf-font-display); font-size: var(--tmf-eyebrow-size); font-weight: 500; letter-spacing: var(--tmf-eyebrow-tracking); text-transform: uppercase; margin: 0 0 0.5rem; opacity: 0.85; } .tmf-scheme-hero__headline { font-family: var(--tmf-font-display); font-style: italic; font-weight: 400; font-size: clamp(28px, 4vw, 48px); line-height: 1.15; margin: 0; } /* ============================================================ Phase 2 will add component styles here (login screen, top nav, hamburger drawer, search modal). Until then, existing styles in styles.css + editorial.css continue to drive every visible component. ============================================================ */ /* ============================================================ Components — Login screen (Phase 2A) ------------------------------------------------------------ Overrides existing .login-* rules in styles.css with the locked design system applied. The HTML structure of the login overlay is unchanged — only its visual treatment is reset here. Cascade order matters: style-guide-r1.css must load AFTER styles.css in index.html for these rules to win. ============================================================ */ .login-overlay { background: var(--tmf-deep-sage); } .login-card { background: var(--tmf-cream); border: 0.5px solid var(--tmf-warm-gray); border-radius: 4px; box-shadow: none; padding: 56px 44px 40px; max-width: 460px; } .login-brand { display: block; text-align: center; margin-bottom: 32px; } .login-brand .brand-mark { margin: 0 auto 20px; width: 40px; height: 40px; background: var(--tmf-warm-black); color: var(--tmf-cream); display: grid; place-items: center; font-family: var(--tmf-font-display); font-style: italic; font-weight: 500; font-size: 16px; border-radius: 2px; } .login-brand-title { font-family: var(--tmf-font-display); font-style: italic; font-weight: 400; font-size: 30px; line-height: 1.15; letter-spacing: -0.005em; color: var(--tmf-warm-black); margin: 0; } .login-brand-tag { font-family: var(--tmf-font-display); font-style: italic; font-weight: 400; font-size: 16px; line-height: 1.45; color: var(--tmf-warm-black); margin: 14px 0 0; } .login-brand-tag em { font-style: italic; font-weight: 500; } /* Tabs — thin underline replacing the pill treatment */ .login-tabs { background: transparent; border: none; border-bottom: 0.5px solid var(--tmf-warm-gray); padding: 0; gap: 0; margin-bottom: 28px; border-radius: 0; } .login-tab { flex: 1; background: transparent; border: none; border-bottom: 1.5px solid transparent; padding: 12px 8px; font-family: var(--tmf-font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(31, 31, 29, 0.55); cursor: pointer; margin-bottom: -0.5px; border-radius: 0; box-shadow: none; transition: color 150ms ease, border-color 150ms ease; } .login-tab.active { background: transparent; border-bottom-color: var(--tmf-warm-black); color: var(--tmf-warm-black); box-shadow: none; } .login-tab:not(.active):hover { color: var(--tmf-warm-black); } /* Form fields */ .login-form { gap: 20px; } .login-form .field-label { display: block; font-family: var(--tmf-font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tmf-warm-black); margin-bottom: 8px; } .login-form .input { background: transparent; border: 0.5px solid var(--tmf-warm-gray); border-radius: 2px; padding: 12px 14px; font-family: var(--tmf-font-body); font-size: 14px; color: var(--tmf-warm-black); width: 100%; box-sizing: border-box; transition: border-color 150ms ease; } .login-form .input:focus { outline: none; border-color: var(--tmf-warm-black); } .login-error { background: rgba(166, 107, 77, 0.12); border: 0.5px solid var(--tmf-terracotta); color: var(--tmf-terracotta); font-family: var(--tmf-font-body); font-size: 12.5px; padding: 10px 14px; border-radius: 2px; margin: 0; } /* Primary submit button */ #loginSubmit.btn-primary { background: var(--tmf-warm-black); color: var(--tmf-cream); font-family: var(--tmf-font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; padding: 16px 24px; border: none; border-radius: 2px; margin-top: 8px; transition: opacity 150ms ease; cursor: pointer; } #loginSubmit.btn-primary:hover { opacity: 0.85; } .login-footnote { font-family: var(--tmf-font-display); font-style: italic; font-size: 13px; color: rgba(31, 31, 29, 0.55); text-align: center; margin: 24px 0 0; line-height: 1.5; } @media (max-width: 600px) { .login-card { padding: 44px 28px 32px; margin: 16px; } .login-brand-title { font-size: 26px; } .login-brand-tag { font-size: 14.5px; } } /* ============================================================ Components — Top nav + drawer (Phase 2B) ------------------------------------------------------------ Replaces the left sidebar with a top horizontal header and a slide-in drawer for navigation. The legacy .sidebar element is hidden via display: none here so existing JS that targets #sidebarUser / #sidebarUserName / #itemCount / #exportBtn / #importInput / #signOutBtn / #themeToggle keeps working without modification. The drawer's Sign Out / Export / Import buttons proxy click events to those hidden elements in drawer-r1.js. ============================================================ */ .sidebar { display: none !important; } .app { display: flex; flex-direction: column; min-height: 100vh; } .main { flex: 1; min-width: 0; } /* ----- Top header ------------------------------------------------ */ .top-header { position: sticky; top: 0; z-index: 80; display: flex; align-items: center; gap: 14px; padding: 14px 22px; background: var(--tmf-cream); border-bottom: 0.5px solid var(--tmf-warm-gray); } .top-action { display: grid; place-items: center; width: 36px; height: 36px; background: transparent; border: none; cursor: pointer; color: var(--tmf-warm-black); font-family: var(--tmf-font-body); border-radius: 2px; transition: background 120ms ease; } .top-action:hover { background: rgba(31, 31, 29, 0.06); } .top-action-icon { font-size: 18px; line-height: 1; } .top-wordmark { flex: 1; text-align: center; font-family: var(--tmf-font-display); font-style: italic; font-weight: 500; font-size: 22px; color: var(--tmf-warm-black); letter-spacing: 0.05em; } .top-action-group { display: flex; gap: 4px; } /* ----- Account dropdown ----------------------------------------- */ .account-dropdown { position: absolute; top: 60px; right: 22px; z-index: 90; min-width: 220px; background: var(--tmf-cream); border: 0.5px solid var(--tmf-warm-gray); border-radius: 4px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(-4px); transition: opacity 140ms ease, transform 140ms ease; } .account-dropdown.dropdown--open { opacity: 1; transform: translateY(0); } .account-username { font-family: var(--tmf-font-body); font-size: 11px; font-weight: 500; color: rgba(31, 31, 29, 0.6); letter-spacing: 0.16em; text-transform: uppercase; } .account-dropdown .btn { font-family: var(--tmf-font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; } /* ----- Drawer ---------------------------------------------------- */ .drawer { position: fixed; inset: 0; z-index: 95; pointer-events: none; } .drawer:not([hidden]) { pointer-events: auto; } .drawer-backdrop { position: absolute; inset: 0; background: rgba(31, 31, 29, 0); transition: background 220ms ease; } .drawer.drawer--open .drawer-backdrop { background: rgba(31, 31, 29, 0.35); } .drawer-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(360px, 88vw); background: var(--tmf-cream); border-right: 0.5px solid var(--tmf-warm-gray); transform: translateX(-100%); transition: transform 220ms ease; display: flex; flex-direction: column; } .drawer.drawer--open .drawer-panel { transform: translateX(0); } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 16px; border-bottom: 0.5px solid var(--tmf-warm-gray); } .drawer-brand { display: flex; align-items: center; gap: 12px; } .drawer-brand .brand-mark { width: 34px; height: 34px; background: var(--tmf-warm-black); color: var(--tmf-cream); display: grid; place-items: center; font-family: var(--tmf-font-display); font-style: italic; font-weight: 500; font-size: 13px; border-radius: 2px; } .drawer-brand-title { font-family: var(--tmf-font-display); font-style: italic; font-size: 17px; font-weight: 500; color: var(--tmf-warm-black); line-height: 1.1; } .drawer-brand-subtitle { font-family: var(--tmf-font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(31, 31, 29, 0.55); margin-top: 4px; } .drawer-close { background: transparent; border: none; cursor: pointer; font-size: 24px; color: var(--tmf-warm-black); padding: 4px 8px; line-height: 1; } .drawer-nav { flex: 1; overflow-y: auto; padding: 14px 0; } .drawer-group { padding: 6px 24px 14px; } .drawer-group + .drawer-group { border-top: 0.5px solid var(--tmf-warm-gray); padding-top: 14px; } .drawer-group-label { font-family: var(--tmf-font-display); font-size: 11px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(31, 31, 29, 0.55); margin: 0 0 8px; } .drawer-link { display: block; padding: 7px 0; font-family: var(--tmf-font-body); font-size: 14px; font-weight: 400; color: var(--tmf-warm-black); text-decoration: none; transition: color 100ms ease; } .drawer-link:hover { color: var(--tmf-sage); } .drawer-link.active { color: var(--tmf-sage); font-weight: 500; } .drawer-footer { padding: 14px 24px 22px; border-top: 0.5px solid var(--tmf-warm-gray); display: flex; flex-direction: column; gap: 6px; } body.drawer-open { overflow: hidden; } @media (max-width: 600px) { .top-header { padding: 12px 16px; } .top-wordmark { font-size: 18px; } .account-dropdown { right: 12px; top: 56px; } } /* ============================================================ Components — Page hero strip (Phase 2B.1) ------------------------------------------------------------ A scheme-colored band immediately under .top-header with the page's eyebrow + italic headline. scheme-r1.js sets a scheme-* class on per route, which flows through the --tmf-scheme-* custom properties to color this band. ============================================================ */ .page-hero { background: var(--tmf-scheme-bg); color: var(--tmf-scheme-fg); padding: 2rem 2rem 1.6rem; transition: background 250ms ease, color 250ms ease; } .page-hero-inner { max-width: 1100px; margin: 0 auto; } .page-hero-eyebrow { font-family: var(--tmf-font-display); font-size: 11px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; margin: 0 0 6px; opacity: 0.85; } .page-hero-headline { font-family: var(--tmf-font-display); font-style: italic; font-weight: 400; font-size: clamp(24px, 3.5vw, 36px); line-height: 1.2; margin: 0; } @media (max-width: 600px) { .page-hero { padding: 1.4rem 1.2rem 1.1rem; } } /* ============================================================ Phase 2B.2 — Scheme spread to body + bigger page hero ------------------------------------------------------------ Each scheme now defines --tmf-page-bg (a body-friendly tint of the scheme color) so the whole page gets the scheme mood, not just the hero band. Light schemes use full intensity; dark schemes use a soft 10% blend over cream to keep the existing white content cards readable. ============================================================ */ .scheme-cream { --tmf-page-bg: var(--tmf-cream); } .scheme-blush { --tmf-page-bg: var(--tmf-blush); } .scheme-sage { --tmf-page-bg: #ECE9DF; } .scheme-soft-sea { --tmf-page-bg: #E8ECEC; } .scheme-bright-teal { --tmf-page-bg: #E5EBEC; } .scheme-mediterranean { --tmf-page-bg: #E4E9EA; } .scheme-terracotta { --tmf-page-bg: #F0E4D9; } .scheme-charcoal { --tmf-page-bg: #E8E4DC; } body { background: var(--tmf-page-bg, var(--tmf-cream)); transition: background 250ms ease; } /* Bigger, more confident page hero so the scheme color reads as a real chapter break, not just a thin strip. */ .page-hero { padding: 3.5rem 2rem 2.8rem; } .page-hero-eyebrow { font-size: 12px; margin: 0 0 10px; } .page-hero-headline { font-size: clamp(28px, 4vw, 44px); } @media (max-width: 600px) { .page-hero { padding: 2rem 1.2rem 1.6rem; } .page-hero-headline { font-size: 26px; } } /* ============================================================ Mobile / iOS fixes (Phase 36 follow-up, 2026-05-10) ------------------------------------------------------------ - Kill horizontal scroll on iPhone - Reduce .main padding on small screens (was 48px both sides) - Allow iOS Safari's auto-zoom on inputs (font-size < 16px) so user can see what they're typing - Page hero / drawer / top header tweaks for narrow viewports ============================================================ */ html, body { overflow-x: hidden; max-width: 100vw; } /* Keep inputs below the iOS 16px auto-zoom threshold so tapping an input zooms in. (User explicitly wants this behavior.) */ .input, input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="number"], input[type="date"], textarea, select { font-size: 15px; } @media (max-width: 600px) { /* Shrink the page padding so content uses the whole viewport */ .main { padding: 20px 16px 60px !important; } /* Anything that was wider than the viewport — clamp it */ .main > *, .main img, .main table, .main pre { max-width: 100%; } /* Top header tightens up */ .top-header { padding: 12px 14px; } .top-wordmark { font-size: 20px; } /* Drawer takes the full width minus a small reveal */ .drawer-panel { width: min(92vw, 360px) !important; } /* Account dropdown anchored properly inside viewport */ .account-dropdown { right: 12px !important; min-width: 200px; } } /* iPhone-narrow specifically (most modern iPhones are ~390-430px) */ @media (max-width: 430px) { .main { padding: 16px 12px 60px !important; } .page-hero { padding: 1.5rem 1rem 1.2rem; } .page-hero-eyebrow { font-size: 11px; } .page-hero-headline { font-size: 22px; } } /* Returns Due — keep the row from overflowing on iPhone. Below 480px, stack the action buttons below the item info instead of squeezing them off the right edge of the screen. */ @media (max-width: 480px) { .rd-row { grid-template-columns: 56px 1fr; grid-template-areas: "thumb info" "thumb actions"; row-gap: 8px; padding: 10px 12px; } .rd-thumb { grid-area: thumb; width: 56px; height: 56px; align-self: start; } .rd-info { grid-area: info; min-width: 0; } .rd-info .rd-name, .rd-info .rd-meta, .rd-info .rd-deadline { overflow-wrap: anywhere; } .rd-actions { grid-area: actions; justify-content: flex-end; } .rd-actions .btn { padding: 6px 12px; font-size: 12px; } } /* ============================================================ Mobile follow-ups (v58) — Add Item color row, page margins, modal scrolling on iOS. ============================================================ */ /* A bit more breathing room on small screens (was 16px, now 18-20px) */ @media (max-width: 600px) { .main { padding: 22px 22px 60px !important; } } @media (max-width: 430px) { .main { padding: 20px 20px 60px !important; } } /* Add Item — Color row gets cramped when input + "From photo" button share a single line on narrow screens. Stack them. */ @media (max-width: 500px) { .field .row { flex-wrap: wrap; } .field .row > .input { min-width: 0; flex: 1 1 100% !important; } .field .row > .btn { flex: 0 0 auto; } } /* Modal scrolling on iOS. Reliable touch scrolling inside .modal-panel plus iOS-Safari momentum. */ .modal-panel { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } @media (max-width: 600px) { .modal-panel { /* On small phones, fill the screen with a small margin so the form has real estate to scroll through. */ width: calc(100vw - 24px) !important; max-height: calc(100vh - 24px) !important; border-radius: 12px; } .modal-content { padding: 20px !important; } }